Web Design

1. Web Design Rabie A. Ramadan, PhD http://rabieramadan.org 2

2. Human Computer Interface (HCI) Interaction of the user with computer software and hardware Includes topics such as: Software development and usability engineering Principles of good design Usability testing Styles of interaction Accessibility for people with disabilities Accommodation of human similarities and diversities Not just about application design – also WWW design “User-friendly” is the common buzz word Good HCI is all about good design

3. What is HCI?

5. Why should we study HCI? When you produce an interface (a web page, or otherwise), you affect how people use the interface. When you write a program, you affect how people will use the program. HCI affects you. You are a designer. In order to produce a high quality interface it is necessary to consider good design principles.

6. Design Guidelines Guidance for designers falls into three general categories: High-level : Theories and models Middle-level : Principles Low-level : Specific practical guidelines This design information is applicable to wide-ranging situations, not just software/interfaces.

7. What is a Mental Model? Think - How many windows are in the house (or building) where you grew up? How did you reach an answer? Users form a mental model of what is going on when they use software.

8. Two Main Types of Mental Model Structural Models How something is structured/built Understanding of the inner workings of the object Examples: Bicycle Brakes Repairers of appliances have structural mental models Functional Models How something functions Knowing how to interact with the object Examples: Cars TV / VCR / DVD Calculators

9. Uses of Mental Models When we design, we must: try to help the user develop a productive mental model... …by designing an interface that reflects that model refrain from performing actions that violate the model

10. When a Mental Model goes Wrong Which thermostat setting should be chosen to warm up the room to 21 degrees more quickly?

11. Mental Models in Software A simple example: Text Editing Part of a user’s mental model is that text displayed is what is actually in the file Files stored in a hierarchy of folders Helps us to organize our files.

12. What is a Metaphor? A metaphor is something that is based on a concept that the user is already familiar with:

13. Uses of Metaphors The main point about the use of metaphors is that the user already knows how the familiar object works This is both an advantage and a disadvantage – Shorter learning required when the metaphor fits. Behavior can be confusing when the metaphor doesn’t fit - this is the danger for the designer if a metaphor is taken too far...

14. Data Display Organization Affordance Visual effects

15. Data Display - Organisation Smith and Mosier’s objectives for data display: Consistency of data display e.g. terminology, fonts, colours, capitalization Efficient information assimilation e.g. neat columns, proper use of spacing Minimal memory load on user - requires careful organisation of multi-action tasks Compatibility of data display with data entry Flexibility for user control of the data display - e.g. different views of working area

16. Structure Make the structure of your display well-organized Links in hypertext that accurately describe the destination of the link , Main work area, toolbars. Remember the user’s mental model. Don’t violate it.

17. The Cooker

18. The cooker (2) It’s a sensible organization - so why do I often make mistakes?

19. Affordance Affordance: A visual cue as to what an object does

20. Affordances Which tap is which? How do you turn these taps on?

21. Using Affordances in Interfaces Give visual cues to the user what to do with the interface Buttons press, scrollbars move the view, arrows indicate that something happens in that direction, textured surfaces indicate it’s touchable…

22. Visuals - Colour Colour does attract attention, so should be used carefully and the brighter colours used sparingly. Suggestion: Use mostly neutral colours, with up to four colours to complement these. Example: Microsoft Word uses mostly blue shades, with gold for highlighting, and other colors used very sparingly on buttons.

23. Example: Las Vegas Effect

24. What is Colour Blindness? Colour ‘blind’ people see colours, but they see a different range of colours from non-colour-blind people. The cone receptors in their eyes (usually the red and/or the green cones) are different.

25. Some colour-blindness tests

26. Effects on everyday life Lack of thought by designers is the major problem facing those who are colour-blind - colours are relied upon unnecessarily. An example of bad design: A mobile phone charger with a red light to indicate charging, and a green light to indicate fully charged.

27. Colour-Blindness & Design If you’re not colour-blind (or only mildly so), use colourblindness simulators to test your software interfaces yourself Simulators available include www.vischeck.com - an online image/web page tester

28. Middle-level : Principles

29. Middle-level : Principles We look at Shneiderman’s principles: Principle 1 : Recognise Diversity Principle 2 : Follow the Eight Golden Rules Principle 3 : Prevent Errors

30. Principle 1: Recognize Diversity “Know thy user” “Recognize Diversity” does not necessarily mean “cater for all possible users” but you should consider the users who will actually use your site. We consider two useful ways to think about this: Usage profiles Task profiles

31. Recognize Diversity - Usage Profiles Different people have different requirements for their interaction with computers. Consider: A 10-year old playing a computer game An elderly lady sending her first email to a friend A student surfing the web for pictures to illustrate a presentation on the decline of the honey bee An employee using the company finance software

32. Recognize Diversity - Usage Profiles Factors for consideration: Age, gender, physical abilities, education, cultural background, training, motivation, goals, personality… Also consider experience: Novice users Knowledgeable intermittent users Expert frequent users

33. Recognize Diversity - Task Profiles It is important to consider what users are trying to do! Analysis should consider needs of different types of users and common tasks performed. WWW examples: Purchasing a desired item Browsing a site to see what’s new

34. Principle 2: Follow the Eight Golden Rules Strive for consistency Enable frequent users to use shortcuts Offer informative feedback Design dialogues to yield closure Error prevention/handling Permit easy reversal of actions Support internal locus of control Reduce short-term memory load

35. Golden Rule 1 - Consistency It is very confusing if similar actions are performed differently in different pieces of software. Bad example: Website colours of visited links and unvisited links Good example: Windows control buttons

36. Golden Rule 2 - Shortcuts Experienced users greatly appreciate having quick ways to initiate actions. Examples include reduction of movement from mouse to keyboard and vice versa. Example: CTRL-X, CTRL-C, CTRL-V in Microsoft applications for cut, copy and paste (also satisfies consistency rule as well)

37. Golden Rule 3 - Feedback The user should be able to see some result for every action performed. Bad example: Text editors that allow you to type whilst an auto-save is in progress, but you can’t see anything on the screen for several seconds. Good example: Current colour selection in a painting program offers automatic feedback if the user changes the colour.

38. Golden Rule 4 - Closure Design so that the user can see the beginning, middle and end of (non-instantaneous) actions. Example: a progress bar, Ftp client

39. Golden Rule 5 - Error Handling If a user makes an error, the system should as much as possible inform the user and offer opportunities for correction. Good examples: If the user chooses an existing filename when saving a file, a dialog box pops up to see whether the old file should be replaced or not. Trying to leave a program without having saved work

40. Golden Rule 6 - Easy Reversal of Actions Every user has performed actions they later wished they hadn’t. An UNDO button can be extraordinarily useful. Note that an undo button may reverse just the latest action, or go backwards through a whole sequence. Example: The Back button in web browsers is a form of undo button; it is highly useful for navigational purposes and is the second-most commonly used feature in a browser.

41. Golden Rule 7 - Feeling in Control New users may well not feel in control as they are getting used to a system, but the experienced user strongly wants to feel in control. Users should be initiators of actions, not merely surprised (and annoyed) if software performs actions without the user’s knowledge or permission. Bad examples from Microsoft Word: Hyperlinks automatically underlined and font-selected Automatic capitalization and spelling correction Automatic extension of text selection

42. Golden Rule 8 - Short-term Memory Load Humans can only retain a small amount of information in short term memory. Examples: Helpful pictures on buttons are good Tool tips

43. Principle 3: Prevent Errors This is slightly different from the 5th Golden Rule – it’s all about prevention (better than cure!) Errors can be prevented by good design. It is important to understand the types of mistakes that users make. Example: the design of USB sticks What happens if the user tries to insert the stick the wrong way? Example: Autocorrection

44. Your first Assignment Design a website for the “web design course” or for yourself implementing the learned information introduced in the course. Deliver the website to the TA and discuss the main concepts you build the website based on. You may have a look at these websites http://cis.umary.edu/