Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PxS’12 - week 10 - screen design


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

PxS’12 - week 10 - screen design

  1. 1. EPFL, spring 2012 - week 10!screen design
  2. 2. overview➝  Deductive vs. inductive interfaces➝  Typography & colour➝  Menus, forms, touch-based UIs
  3. 3. theory!levels of human–computer Interactionuser’s/organisation’s goals output in the real world GOAL LEVELuser’s knowledge computer’s representation TASK of task domain of task domain LEVELuser’s knowledge computer command DIALOGUEof language language LEVELuser’s hands, eyes computer keyboard, INPUT/ display OUTPUT LEVELhuman structures system structures
  4. 4. theory!levels of HCI " "user’s/organisation’s goals! output in the real world! GOAL LEVEL! gmail example: user’s knowledge ! computer’s representation TASK !of task domain! of task domain! LEVEL! “understanding of how Email applications work” "user’s knowledge ! computer command DIALOGUE “understanding theof language! language! LEVEL! meaning and usage of the various interaction alternatives”user’s hands, eyes! computer keyboard, INPUT/ display! OUTPUT “ability to perceive and LEVEL! interact with the varioushuman structures! system structures! functions”
  5. 5. theory!user experience design [Jesse James Garrett] The process of user experience design is about “ensuring that no aspect of the user’s experience with your [system] happens without your conscious, explicit intent. This means taking into account every possibility of every action the user is likely to take and understanding the user’s expectations at every step of the way through that process.” ✱See: Garrett, J.J. (2003). The Elements of User Experience. New Riders Press
  6. 6. theory!user experience design [Jesse James Garrett] web as software interface | web as hypertext system concrete surface VISUAL DESIGN INTERFACE NAVIGATION DESIGN DESIGN skeleton INFORMATION DESIGN structure INTERACTION INFORMATION DESIGN DESIGN FUNCTIONAL CONTENT scope SPECIFI- REQUIRE- CATIONS MENTS USER NEEDS strategy SITE OBJECTIVES abstract ✱See:
  7. 7. theory!a framework for design thinking [John Cato]➝  based on gathered knowledge and understanding move on to the actual crafting of the design: ➝  areas- decide on how to group together areas of information and activity, understand the basic building blocks of your system. Understand mood and feel, decide what kind of user experience you want. ➝  what are the pages for? Create a design storyboard to represent when and how users want to obtain information and carry out processes and actions. ✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.
  8. 8. theory!a framework for design thinking [John Cato]➝  what is on a page? detailing what are the contents of each page in an area." ➝  interaction design - decide on what can be done and design the way the user will interact on each page and carry out useful activity." ➝  visual design - design the details of what it all looks like and how the presentation should be to reach out to the user and satisfy the business. ✱See: Cato, J. (2001). User-Centered Web Design. Addison-Wesley.
  9. 9. theory!the iterative process of design “The process of design is one of creativity in problem solving. It is a process which explores facts and feelings, identifies design objectives and goals, generates possible solutions, chooses a solution, creates a design, evaluates the design and repeats. And so, to ‚repeat‘.“ [Cato]  the design cycle often repeats 6-10 times.
  10. 10. theory!visual attention➝  designing pages/screens needs to consider limited visual bandwidth ➝  not everything is „seen“ ➝  selecting things to look " at is a serial process ➝  Bandwidth/attention is " devoted sequentially to " different locations on a " screen
  11. 11. theory !vision as a serial process: “visual search” ✱ gaze paths visualize " visual search processes
  12. 12. Rectangular arch?or…three columns?✱find more examples of perceptual illusions on:
  13. 13. theory !visual perception influences visual searchprocesses➝  What we visually perceive is only partly caused by the stimulus (on the interface, or out in the environment)➝  Prior knowledge has a lot of influence on" our perception, shaping our expectations" about how something is perceived  In a first visual glance at something, " the brain analyses low level " characteristics of a stimulus (colour, " contrast, shape, context, …) and " guesses what we are most likely " looking at…
  14. 14. theory !visual perception influences visual searchthrough bottom-up and top-down processes influence processing origin factors display bottom up current interface contrast color motion grouping layout labeling expectation top down memories of contrast past interfaces color and target motion representation grouping layout labeling
  15. 15. theory!bottom-up processes➝  Low level visual features can attract attention➝  Colour / Contrast➝  Orientation / Alignment➝  Motion Visual design is a process of guiding the user’s perception - uses bottom-up processes to guide and influence a user’s vision/focus, but has to take into account top-down expectations as well. (e.g. flashy adverts on the Web do not work, because people know they are there and ignore them)
  16. 16. design factors!contrast ...guides visual attention ➝  Contrast is what pulls you in, in other words, it draws your eyes to the page. It allows you to move around the page and find things➝  Contrast must be strong. “If two elements, such as type, rules, graphics, colour, texture, etc. are not the same, make them very different- don’t make them almost the same”➝  Contrast creates a focal point, a dominating force, the place your eyes go to when first looking the page (web or print)
  17. 17. design factors!colour contrasts bad examples good examples People with cognitive or sight People with cognitive or sight problems may have difficulty problems may have difficulty reading and distinguishing text reading and distinguishing text from from a background colour a background colour People with cognitive or sight People with cognitive or sight problems may have difficulty problems may have difficulty reading and distinguishing text reading and distinguishing text from from a background colour a background colour
  18. 18. design factors !contrast ... creates a hierarchy of information!➝  Allows you to skim more easily to pick out needed information➝  Adds interest to the page➝  Provides a means of emphasizing what is important➝  Directs the reader’s " eye➝  On a page without " contrast, the reader " does not know where " to look first or what is " important
  19. 19. design factors!similarity / dissimilarity➝  similarity occurs when objects " look similar to one another. " People often perceive them as a " group or pattern➝  dissimilarity occurring in " a group of similar elements " is called anomaly
  20. 20. design factors!continuation / closure➝  continuation occurs when the eye is " compelled to move through one " object and continue to another object.➝  closure occurs when an object is " incomplete or a space is not " completely enclosed. ➝  If enough of the shape is indicated, " people percieve the whole by filling " in the missing infomation.
  21. 21. design factors!alignment➝  It is always best to pick one alignment and " to stay with it. It is not a wise idea to mix " alignments.➝  Hints for better alignment " bad example: (for text documents): ➝  Move text away from left edge ➝  Keep text out of the right edge ➝  Use the same alignment throughout the entire document (right justify, left justify or centre align) ➝  Do not place anything on the page arbitrarily ➝  Do not centre align everything. Centre aligning should be done consciously, not because you cannot think of anything else to do
  22. 22. design factors!repetition➝  Theidea of continuing and repeating certain visual elements of a page. The goal is add to the organizational strength and sense of unity.
  23. 23. design factors!proximity➝  proximity refers to the relationship that items develop when they are close together➝  two items that are close, appear to have a belonging to each other➝  related/similar items, get grouped together➝  when items are physically far from each other, they do not appear to have a relationship with each other➝  elements become visually disconnected from each other➝  do not orphan items / objects
  24. 24. design factors!proximity➝  groups related items together➝  makes page look smaller➝  increases organisation➝  organizes information➝  defines a beginning and ending
  25. 25. design factors!proximity / grouping➝  proximity occurs when elements " are placed close together. They " tend to be perceived as a group When the squares are given close proximity, " unity occurs. While they continue to be separate " shapes, they are now perceived as one group.
  26. 26. design factors!balance➝  visual balance comes from arranging elements on the page so that no one section is „heavier“ than the other➝  a designer may intentionally throw " elements out of balance to create " tension or a certain mood
  27. 27. design factors!asymmetrical balance this page uses a 3 column format to create a neatly organized asymmetrical layout. the two columns of text are balanced by the blocks of colour in the lower left topped by a large block of with space.
  28. 28. design factors!practical example of how human vision isguided by colour, contrast, grouping,alignment, ...
  29. 29. examples !apple OSX dialog boxes
  30. 30. grouping with separators
  31. 31. grouping with white space
  32. 32. grouping with group boxes
  33. 33. Apple‘s changeable panes
  34. 34. example: relevance of designattractiveness bias “The first presidential debate between Richard Nixon and Robert Kennedy (1960) is a classic demonstration of the attractiveness bias. " Nixon was ill and running a fever. He wore light colors and no makeup, further whitening his already pale compexion and contrasting his five-o’clock shadow. " Kennedy wore dark colors, makeup, and practiced his delivery in a studio prior to the debate. People who listened to the debate by radio believed Nixon to be the winner. However, people who watched the debate on TV came to a very different conclusion.”
  35. 35. !task-related organization! "The primary goal for menu, form-fillin, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the users task."
  36. 36. typography - design for readabilitySize➝  Provide alternatives (e.g. for different age groups)➝  Consider resolution of screen (e.g. mobile devices with higher res.)Typeface (Fonts)➝  For digital displays rather use " sans serif: " " " " than serif fonts:
  37. 37. typography - design for readabilityContrast ➝  High contrast, avoid textured backgroundsText Blocks ➝  Keep lines to 10 to 12 words (35 to 60 characters)Spacing ➝  Vertical and horizontal spacing can enhance readibility especially when using small font sizes (or having long texts)
  38. 38. large fonts➝  improve readability➝  simplify selection➝  very large fonts become a graphical element in the UI
  39. 39. !custom fonts…for a unique style!✱ sources for free fonts: excellent-freefontsfor-professional-design
  40. 40. colours➝  need be used in consistent manner➝  a clearly defined colour scheme is an " important tool in design process ➝  Colour schemes help to organise and " structure ➝  The rigid application of a good colour scheme can to some extend conceal a faulty layout➝  they transfer mood and meaning "➝  colour blindness can be an issue!
  41. 41. colour schemes
  42. 42. colours ...for the web 2.0
  43. 43. ✱
  44. 44. ✱
  45. 45. aesthetic web applications!flickr – online photo management
  46. 46. menus!single menus➝  Binary Menus " (e.g. Radio Buttons)➝  Multiple-item Menus➝  Multiple-selection menus (e.g. Check Boxes)➝  Pull-down, pop-up and toolbar menus
  47. 47. menus!embedded menus and hotlinks➝  Embedded menus are an alternative to explicit menus➝  It is natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context
  48. 48. novel menu types (using direct manipulation)!pie menus
  49. 49. novel menu types !menu for small displays entertainment, communication services (mobiles, PDA’s, MP3 players, …)➝  learnability is a key issue ➝  e.g. consistency of “Cancel” and “Ok” buttons➝  hardware buttons ➝  navigation, select➝  expect interactions➝  tap interface
  50. 50. touch-based menus!e.g. for mobile interfaces➝  Intuitive touchscreen" (e.g. unlock mechanism)➝  Big menu itemsWindows Mobile vs Mac OSX
  51. 51. touch-based menus!iPhone gesturesGESTURE ACTIONtap To press or select a control or link (analogous to a single mouse click). You receive the onclick event for this gesture.double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in).flick To scroll or pan quickly.drag To move the viewport or pan.pinch open To zoom in.pinch close To zoom out.touch and hold To display an information bubble, magnify content under the finger, or perform specific actions in built-in iPhone applications and featres.two-finger scroll To scroll up or down within a text area, an inline frame, or an element with overflow capability, depending on the direction of the movement. You can receive a mousewheel event for this gesture
  52. 52. references➝  Gestalt principles ➝" gestalt/gestalt.htm ➝ gestaltprinciples/ gestaltprinc.htm➝  User-Centred Web Design, John Cato, Addison Wesley, 2001➝  Apple Human Interface Guidelines ➝ OSXHIGuidelines/index.html➝  Universal Principles of Design, William Lidwell, Kritina Holden, Jill Buttler, Rockport Press 2003
  53. 53.
  54. 54. Reference designadaptation adaptation