Blog 4

March 13, 2017 patrykkaczmarek403citLeave a comment

Planning and design

Benyon (2014) argue that it is crucial start creating a solution to a given problem from conceptual design. It allows to look at proposed solution from a practical perspective. Forms of conceptual design used by this report were storyboard (figure 1) and navigation diagram (figure 2). Figure 1 is a Google Drawing created to outline layout of the website and some of its features. Haesen et al. (2010) argue that storyboards help to state future use of a system. It is very important for the whole process of creating a solution to know how system proposed is going to be used to make sure that solution answer the needs of a problem.

Figure 1 Storyboard

This report proposes web type navigation as this website has only 10 pages.

Figure 2 Navigation Diagram

Rollovers

Quesenbery (2011) argue that it is very important for a website to provide feedback to the user. It is to help the users understand how it works. Way of providing feedback proposed by this report is rollovers (figure 3). Burns (2010) state that rollover change the image/text when users hovers their mouse over it. It was used on navigation of the website.

Figure 3 Rollover

Alt-text

Booth (2012) states that website designers should ensure that every user can use their websites with all the functionality. To ensure that users using screen readers can use the website every image has been provided with an alt-text to display for them (figure 4). It is also profitable for the company (W3C, 2012) and required by law (Great Britain, 2010).

Figure 4 Alt-text

Video

Haskin (2013) argue that usage of videos on a website can make it more engaging for the user. O’Brien and Toms (2010) argue that user engagement is essential when designing interactive systems. A video can take user’s attention and make them stay longer on a website. It is a possible improvement to the design as there is currently none and adding them would make the website more enjoyable for the user.

Questionnaire

Pagano and Maalej (2013) argue that user feedback can have a very positive effect on an interactive system. A questionnaire was sent to get it(Appendix A). Users suggested that left sidebar (figure 5) should be either changed or deleted as it is not needed because the reviews can be accessed from navigation bar and it has scaling problems on mobile devices.

Figure 5 Left Sidebar

When evaluating website as a whole users average score was 8/10.

References

Benyon, D. (2014) Designing Interactive Systems: A comprehensive guide to HCI, UX and interaction design (3rd ed.), Harlow, Pearson.

Booth, C. (2012) Why Accessibility?, Library Technology Reports , 48 (2), pp. 5-6.

Burns, J. (2010) Text Rollovers: What’s Good and What is Just Plain Bad (online).

Available from <http://www.htmlgoodies.com/beyond/css/article.php/3470411>

(Accessed 12th March 2017)

Great Britain (2010) Equality Act 2010 : Chapter 15, London, The Stationery Office.

Haesen, M., Meskens, J., Luyten, K. and Coninx, K. (2010) Draw Me a Storyboard: Incorporating Principles and Techniques of Comics to Ease Communication and
Artefact Creation in User-Centred Design. In: Proceedings of the 24th BCS Interaction Specialist Group Conference, 6th September, Swindon, United Kingdom.

Haskin, S. (2013) Using Video in E-Learning, Virginia, American Society for Training and Development.

O’Brien, H. L. and Toms E.G. (2010) The development and evaluation of a survey to measure user engagement, Journal of the American Society for Information Science and Technology, 61(1), pp.50-69.

Pagano, D. and Maalej, W., (2013) User Feedback in the AppStore: An Empirical Study, In: Requirements Engineering Conference, 15th – 19th July, Rio de Janeiro, Brasil.

W3C (2012) Developing a Web Accessibility Business Case for Your Organization (online). Available from <https://www.w3.org/WAI/bcase/Overview>

(Accessed 13th March 2017)

Quesenbery, W. (2011) Using the 5Es to understand users (online).

Available from <http://www.wqusability.com/articles/getting-started.html>

(Accessed 12th March 2017)

Appendices

Appendix A

Questionnaire

Available from <https://docs.google.com/a/warwickshire.ac.uk/forms/d/1_3u6xg7w9y325sVveFWDGv7p3v0SAEH9n2F2xxTlH-g/edit?usp=sharing>

(Accessed 13th March 2017)

Blog 3

January 29, 2017 patrykkaczmarek403citLeave a comment

Parallax Scrolling

Frederick et al. (2015) define parallax as a scrolling technique that creates an illusion of depth on a website. Frederick (2013) argues parallax scrolling significantly improves the enjoyability of a website. As the positive user experience on a company’s website can make the user transfer the positive feelings towards a company it is a significant advantage. A good example of a company using parallax on their website is Costa Coffee (2017) (figure 1). This site explains the whole Costa business in a very enjoyable way which makes the user more likely to visit their shop next time they see it.

Figure 1 Good parallax example

Source: Costa Coffee (2017)

However, as Thomas (2014) argues an issue with parallax websites are their loading times. As they incorporate all content on one page, they take very long to load compared to non-parallax internet sites. Cornish and Dukette (2009) indicate that human attention span is just 8 seconds. For a site, it means that if it takes more than 8 seconds to load almost no one is going to see it.

An example of very long loading parallax website is Flash vs HTML5 which takes approximately 15 seconds to load (figure 2).

Figure 2 Bad parallax example

Source: Waste creative (2017)

Accessibility options

Accessibility options are usually a special menu or page where the user can change different features of a website to suit their needs. This might include text size, colour and background colour. Accessibility is not only required by law (Great Britain, 2010) but also profitable for a company (W3C, 2012). Accessibility options are one of the ways to ensure accessibility of a website. An excellent accessibility menu can be seen on BBC’s website (figure 3). It has many different options and also helps users who are unsure of what they should change.

Figure 3 BBC accessibility menu

Source: BBC (2014)

Possible issue with accessibility options according to Tang et al. (2011) might be that a person that needs this feature may have problems finding it on the site. It is the case for the website visible in figure 4. Accessibility options are placed at the very bottom of the site and have small text size which makes them very hard to find especially for a person that needs them.

Figure 4 Bad accessibility options example

Video

It is a series of images played fast enough to imitate movement (Oxford University Press, 2017). Shelly and Campbell (2011) argue that usage of videos can make a website more enjoyable for the user. As explained above it is crucial for a website to be enjoyable. An example of an internet site that uses video in a right way can be seen in figure 5. Youtube is a very successful site, and most of its content is video.

Figure 5 Positive video example

Source: YouTube (2017)

A possible misuse of this feature is an abuse of autoplay attribute present in HTML5 which makes the video play automatically, possibly, without user’s knowledge or consent. As Patricios (2009) points out, it is not only irritating for most of the users, but for some of them which use screen readers, it may render a site unusable.

References

BBC (2014) My Web My Way (online)
Available from <http://www.bbc.co.uk/accessibility/>

(Accessed 29th January 2017)

Cornish, D. and Dukette, D. (2009) The Essential 20: Twenty Components of an Excellent Health Care Team, Pittsburgh, U.S.A., RoseDog Books.

Costa Coffee (2017) Costa Coffee Experience (online).

Available from <http://www.costa.co.uk/experience/>

(Accessed 25th January 2017)

Frederick, D. M. (2013) The Effects Of Parallax Scrolling On User Experience And Preference In Web Design, Department of Computer Graphics Technology Degree Theses, 18th April.

Frederick, D., Mohler, J., Vorvoreanu, M. and Glotzbach, R. (2015) The Effects of Parallax Scrolling on User Experience in Web Design, Journal of Usability Studies, 10 (2), pp.87-95.

Oxford University Press (2017) video – definition of video in English (online).

Available from <https://en.oxforddictionaries.com/definition/video>

(Accessed 29th January 2017)

Patricios, E. (2009) Autoplay is bad for all users (online).

Available from <http://www.punkchip.com/autoplay-is-bad-for-all-users/>

(Accessed 29th January 2017)

Shelly, G. and Campbell, J. (2011) Web Design: Introductory, Boston, Cengage Learning.

Tang, L., Fourney, D. and Carter, J. (2011) Experiencing Accessibility Issues and Options, Communications in Computer and Information Science, 173 (5), pp. 399-403.

Thomas, J.K. (2014) Parallax Scrolling: Attention Getter or Headache? (online).

Available from <http://www.uxmatters.com/mt/archives/2014/11/parallax-scrolling-attention-getter-or-headache.php>

(Accessed 25th January 2017)

United Kingdom (2010) Equality Act 2010 : Chapter 15, London, The Stationery Office.

Waste Creative (2017) Flash vs HTML5 (online).

Available from <http://flashvhtml.com/>

(Accessed 25th January 2017)

W3C (2012) Developing a Web Accessibility Business Case for Your Organization (online). Available from <https://www.w3.org/WAI/bcase/Overview>

(Accessed 29th January 2017)

Youtube (2017) Homepage (online).

Available from <https://www.youtube.co.uk/>

(Accessed 29th January 2017)

Blog 2

November 28, 2016 patrykkaczmarek403citLeave a comment

HTML5(HyperText Markup Language)

HTML5 is the newest version of HTML which is a standard programming language used when creating websites (W3Schools, 2016). It was introduced in 2014 (W3C(World Wide Web Consortium), 2014) and replaced HTML 4.01, XHTML(eXtensible HyperText Markup Language) 1.0 and XHTML 1.1 (Pilgrim, 2010) which were introduced in 1999(W3C, 1999), 2000(W3C, 2000) and 2001(W3C, 2001) respectively. As Anthes (2012) argues it brings many new features to HTML standard such as access to geolocation, richer graphics and a capability to play videos. As Lawson and Sharp (2012) argue HTML5 enables developers to use functions that were previously accessible only through other applications and make them compatible with every modern web browser and device. Another crucial feature of HTML5 is, according to Lubbers et al. (2011), the ability to evolve rapidly and address real life problems web developers have with developing websites.

Example

An excellent example of a website using HTML5 features is youtube.com. It is natively playing videos in HTML5 player if the web browser supports it (Youtube, 2016)(fig.1).

Figure 1 HTML5 player on youtube.com

Source: Techquickie (2015)

CSS3(Cascading Style Sheet)

Goldstein et al. (2011) indicate that CSS is a style language describing how code written in HTML is presented. Without it, websites written in HTML would have been able to use only one font, one colour of text, one layout, etc. It was introduced in 2006 in its first form and has been under ongoing, open source development(supervised and controlled by W3C) since then (Gasston, 2011). As Frain (2012) argues it gives the developer the opportunity to replace very complicated to use JavaScript with relatively easy to use code to achieve: gradients, shadows, typography, animations and transformations. It makes developing websites much easier and faster for developers, and because of it users without experience in JavaScript can still develop an accessible and responsive website.

Example

A very impressive example of a website created using only HTML and CSS is Mark J. Sebastian’s portfolio available from www.markjsebastian.com(fig.2). It allows the user to move between photos using their mouse and every click or scroll starts an animation of moving.

Figure 2 Mark J. Sebastian’s portfolio

Source: Sebastian (2016)

Notepad++

Notepad++ is an advanced source code editor, exclusive to Windows, that was initially released in 2003 and has been developed as an open source project since then (Mombrea, 2013) with its last update being published only a few days ago, on 20th of November (Ho, 2016a). It is an advanced version of available in Windows Notepad that is programming friendly and better optimised regarding resource usage. Its long features list consists of for example syntax highlighting, auto-completion, compatibility with many different programming languages and zooming in and out(Ho, 2016b).

Example

How a standard layout and colours look in Notepad++ can be seen in figure 3. It is not an actual program but a joke published by the author on the official website of Notepad++.

Figure 3 Notepad++ standard layout and colours

Source: Ho (2016c)

References

Anthes, G. (2012) HTML5 leads a web revolution, Communications of the ACM, 55 (7), pp. 16-17.

Frain, B. (2012) Responsive Web Design with HTML5 and CSS3, Birmingham, Packt Publishing Ltd.

Gasston, P. (2011) The Book of CSS3: A Developer’s Guide to the Future of Web Design, San Francisco, No Starch Press.

Goldstein, A., Lazaris, L. and Weyl, E. (2011) HTML5 and CSS3 for the Real World, Collingwood, SitePoint Pty. Ltd.

Ho, D. (2016a) Notepad++ 7.2.1 released (online).

Available from <https://notepad-plus-plus.org/news/notepad-7.2.1-released.html>

(Accessed 27th November 2016)

Ho, D. (2016b) Notepad++ Features (online).

Available from <https://notepad-plus-plus.org/features/>

(Accessed 27th November 2016)

Ho, D. (2016c) Screenshot (gif), Notepad++ official website (online).

Available from <https://notepad-plus-plus.org/assets/images/notepad4ever.gif>

(Accessed 27th November 2016)

Lawson, B. and Sharp, R. (2012) Introducing HTML5, Berkeley, New Riders.

Lubbers, P., Albers, B. and Salim, F. (2011) Pro HTML5 Programming, (2nd ed.), New York, Springer Science+Business Media, LLC.

Mombrea, M. (2013) Tools we love: Notepad++ (online).

Available from <http://www.itworld.com/article/2833295/open-source-tools/tools-we-love–notepad–.html>

(Accessed 27th November 2016)

Pilgrim, M. (2010) HTML5: Up and Running, Sebastopol, O’Reilly Media, Inc.

Sebastian (2016) Photography by Mark J. Sebastian – Portraiture (online).

Available from <http://www.markjsebastian.com>

(Accessed 27th November 2016)

Techquickie (2015) HTML5 as Fast As Possible (online film).

Available from <https://www.youtube.com/watch?v=IsXEVQRaTX8>

(Accessed 26th November 2016)

W3C (1999) HTML 4.01 Specification W3C Recommendation 24 December 1999 (online).

Available from <https://www.w3.org/TR/html4/>

(Accessed 25th November 2016)

W3C (2000) XHTML™ 1.0: The Extensible HyperText Markup Language A Reformulation of HTML 4 in XML 1.0 W3C Recommendation 26 January 2000 (online).

Available from <https://www.w3.org/TR/2000/REC-xhtml1-20000126/>

(Accessed 25th November 2016)

W3C (2001) XHTML™ 1.1 – Module-based XHTML W3C Recommendation 31 May 2001 (online).

Available from <https://www.w3.org/TR/2001/REC-xhtml11-20010531/>

(Accessed 25th November 2016)

W3C (2014) HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014 (online).

Available from <https://www.w3.org/TR/2014/REC-html5-20141028/>

(Accessed 25th November 2016)

W3Schools (2016) Introduction to HTML (online).

Available from <http://www.w3schools.com/html/html_intro.asp>

(Accessed 25th November 2016)

Youtube (2016) YouTube HTML5 Video Player (online).

Available from <https://www.youtube.com/html5?gl=GB>

(Accessed 26th November 2016)

Blog 1

October 5, 2016October 14, 2016 patrykkaczmarek403citLeave a comment

First theorists trying to define usability focused on the work aspects of using a computer. Gould and Lewis (1985) argue that programs should be useful and easy to learn. It is important to create software that is easily usable for the least comfortable group of potential users. More modern approaches, as the five E framework proposed by Quesenbery (2003) also take into consideration user enjoyment. The E’s are:
Effective – Accurate
Efficient – Fast
Engaging – Enjoyable
Error tolerant – Error preventing
Easy to learn – Usable for everyone
As Quesenbery (2011) himself argues in a different work he made, it is important to consider all five E’s but also indicate which are more important in a given situation. Considering call centre’s database, an essential principle is efficiency because customers should not wait while it loads.

Figure 1 is an example of bad usability. Ineffective (not updated since 2012), inefficient (too much text to read before finding information), unengaging (many fonts make it hard to read and not enjoyable), not error tolerant (User cannot see what pages have they been to) and hard to learn (many things are in unexpected places, for example, copyright in the middle of a page). A contradiction is Figure 2. It avoids all of the previous example mistakes.

Figure 1: Bad usability (Ugly Tub, 2012)

Figure 2: Good usability (Amazon, 2016)

Booth (2012) defines accessibility as giving the full functionality to the biggest amount of people possible. Everyone should be allowed to use websites to their fullest. According to W3C (2016), an accessible website is designed to work for everybody regardless of:
Hardware
Software
Language
Culture
Location
Physical disability
Mental disability
Every possible scenario must be considered when designing a webpage as, for example, not everyone can easily use English. Accessibility’s importance comes from various reasons as it is not only profitable for a company (W3C, 2012) but also required by law in most countries (in the UK by Equality Act 2010). The cost involved in creating an accessible website returns to a company very quickly.

An accessible website is shown in Figure 3, it has easy to use accessibility menu while a bad example is Figure 4 as it is hard to read and images are unreadable by screen readers(lack of the “alt” text).

Figure 3: Accessibility menu (BBC, 2014)

Figure 4: Bad accessibility (Yvette’s Bridal Forum, 2010)

Dix et al. (2005) indicate that functional program should conform to standard functions. It means that a program, or a website, needs to do what a user intends it to do. Thorlacius (2007) argues that functional website allows the user to quickly access desired information. The most important part of a website that can allow it is navigation. This two works paraphrased together clearly show that navigation is the biggest part of a website functionality. Research conducted by Palmer (2002) also show that navigation is a big part of website success.

An example of a very bad navigation is Figure 5 as it is clunky, hard to understand and coded into <div> instead of <nav>. The website with a very good navigation is Figure 6, which uses a very simple dropdown menu that shows users links to what they are looking for.

Figure 5: Bad functionality (James Bond Museum, 2016)