Human-Computer Interaction 18. Design – Mobile Design Principles Sunyoung�Kim,�PhD�
Last class Norman’s design principles
Recap. Usability Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment - ISO 9024 Usability is NOT identical to making things simple to use!!!
Recap. Norman’s 6 design principles 1. Visibility – can I see it? 2. Feedback – what is it doing now? 3. Mapping – where am I and where can I go? 4. Affordance – how do I use it? 5. Constraint – these are the things I can’t do 6. Consistency – I think I have seen this before
Today’s lecture 1. UI Design basics 2. Mobile UI design principles 3. Input devices 4. Wearables
UI Design Basics
UI brings together concepts from: 1. Interaction design 2. Visual design 3. Information architecture
1. Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction: 1. Define how users can interact with the interface What can a user do with their mouse, finger, or stylus to directly - interact with the interface? (e.g., buttons, drag&drop) What commands can a user give, that aren’t directly a part of the - product, to interact with it? (e.g.., when a user hits “Ctrl+C”, they expect to be able to copy a piece of content; when a user hits “Enter”, they expect for a form to be submitted)
1. Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction: 1. Define how users can interact with the interface 2. Give users clues about behavior before actions are taken: affordance Does the appearance (color, shape, size, etc.) give the user a clue - about how it may function? What information do you provide to let a user know what will - happen before they perform an action? (e.g., label on a button, instructions before a final submission, etc.)
1. Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction: 1. Define how users can interact with the interface 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error: constraints Are there constraints put in place to help prevent errors? - Do error messages provide a way for the user to correct the - problem or explain why the error occurred?
1. Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction: 1. Define how users can interact with the interface 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error 4. Consider system feedback and response time: feedback What feedback does a user get once an action is performed? - How long between an action and a product’s response time? -
1. Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction: 1. Define how users can interact with the interface 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error 4. Consider system feedback and response time 5. Strategically think about each element: Fitts’ Law Are the interface elements a reasonable size to interact with? - Are edges and corners strategically being used to locate interactive - elements like menus?
2. Visual design Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. Basic Elements of Visual Design Lines • Shapes • Color • Texture • Typography • Form •
2. Visual design: visual path Visual paths guide users from one element to another, and allow designers to control how information is being perceived and in what order.
2. Visual design: visual path
2. Visual design: visual path 1. Color: Use one to two colors that will serve as a visual path. 2. Type: Use consistent font style, color, and behaviors to allow users to quickly scan the page. 3. Grid and shapes: Use modular grid systems supported by negative space for well balanced and organized design.
2. Visual design: visual path
2. Visual design: visual path
3. Information architecture IA focuses on organizing, structuring, and labeling content in an effective and sustainable way to help users find information and complete tasks. Think about how the pieces fit together to create the larger picture, and how items relate to each other within the system Organization structures: How you categorize and structure information • Navigation systems: How users browse or move through information • Search systems: How users look for information •
Mobile UI Design Basics
Overall 1. Show the value of your app upfront. Get rid of anything that isn’t • absolutely necessary: reducing the clutter improves comprehension Rule of thumb: One primary action • per screen
Overall 2. Create a seamless experience: Responsive design
Overall 3. Design controls based on hand position & finger-tap size Place top-level menu & frequently-used controls to the green • zone : comfortably reached with one-thumb interactions Place negative actions (such as delete or erase) in the hard to • reach red zone: to prevent accidentally tap them Design Finger-friendly Tap-targets •
Overall 4. Make interface elements clearly visible It’s extremely important to have enough contrast on mobile: • users might be outdoors with low contrast on the screen
Overall 5. Minimize needs for typing Keep forms as short and simple as possible by removing any • unnecessary fields Use auto-complete and personalized data where appropriate so • that users only have to enter the bare minimum of information
Navigation and Exploration 1. Make navigation self evident Consistent throughout the app • Mobile navigation should • communicate the current location.
Navigation and Exploration 2. Organize and label menu categories to be user-friendly
Navigation and Exploration 3. Allow users to "go back" easily in one step
Navigation and Exploration 4. Provide text labels and visual keys to clarify visual information
Navigation and Exploration 5. Create frictionless transitions between mobile apps and mobile web
Form entry 1. Build user-friendly forms
Form entry 2. Communicate errors in real time
Form entry 3. Match the keyboard with the required text inputs
Form entry 4. Be responsive with visual feedback after significant actions
Summary: Mobile UI design principles 1. Overall 1) Show the value of your app upfront 2) Create a seamless experience 3) Design controls based on hand position & finger-tap size 4) Make interface elements clearly visible 5) Minimize needs for typing 2. Navigation and exploration 1) Make navigation self evident 2) Organize and label menu categories to be user-friendly 3) Allow users to "go back" easily in one step 4) Provide text labels and visual keys to clarify visual information 5) Create frictionless transitions between mobile apps & mobile web 3. Form entry 1) Build user-friendly forms 2) Communicate form errors in real time 3) Match the keyboard with the required text inputs 4) Be responsive with visual feedback after significant actions
Responsive Design
Responsive design To make websites responsive to their environment • Make pages that look great at any size •
Responsive vs. Adaptive
Responsive design
Responsive design
(1) Mobile first
(2) Modular contents
(3) Flexible & fluid contents
(4) Fluid image
Responsive design Start small (Mobile First) • Make it modular • Make it fluid, flexible • Flexible Layouts • Flexible Grid • Fluid Images • Always be optimizing • *Best practices are still emerging!
Responsive design: examples
Responsive design: examples See more: http://www.awwwards.com/websites/responsive-design/
Wearable
First wearable computer?
Xerox Star (1981)
Wearable computer An electronic device capable of storing and processing data that is incorporated into a person's clothing or personal accessories Portable while remaining operational, thereby allowing a user to move • and still operate the device Integrate sensors such as wireless communications, cameras, GPS, • microphones and accelerometers as input devices to provide information about the close environment Communicate information to the user in a proactive way, thus conveying • information to the user even when not being actively used Always being on and continuously receiving information about the • surrounding environment
Steven K. Roberts: Steven K. Roberts: type while riding the bicycle Steve Mann: using apps while walking around
Recommend
More recommend
