User Interface Design in Practice

50 %
50 %
Information about User Interface Design in Practice
Design

Published on July 4, 2009

Author: Titine

Source: slideshare.net

Description

A presentation I gave in 2007 to Business School students at the University of Auckland - focusing mostly on the value of sketching, prototyping and iterating in software design & development.

Usability in Practice User Interface Design in Practice Justine Sanderson| Userfaction Ltd | 3 May 2007 © 2007 Justine Sanderson

Today 1. You are not the user 2. Design for the user model 3. Involve users – not just stakeholders 4. Prototype 5. Learn about good design principles 6. Know your Usability Heuristics 7. Read some books 8. Remember these axioms

You are not the user

architect cleaner waitress policeman teacher gardener farmer midwife receptionist musician builder marine biologist nurse florist photographer sales assistant nanny plumber sharetrader banana ripener accountant journalist coach politician student machine operator

hang out with Hang out withwho don’t people people use a computer 8 hours a day

Design for the user model

System Model

User’s Mental Model The internet is a series of tubes

Involve Users

Create Personas • Archetypal representation of your target audience • Based on user research (ideally) • Aggregation of your users’ goals, attitudes, and behaviours • Presented as a vivid, narrative description of a single “person” who represents a user segment

Create Personas

Prototype

Test Early & Often

The cost of changes

Prototyping Redux

Never be satisfied with the first idea Most developers tend to adopt a "satisficing" strategy that focuses on initial, satisfactory, but less than optimal, solutions. Never be satisfied with a single opinion or the first idea. It is best to "saturate the design space" with ideas before making decisions and to consider alternatives (i.e., better design solutions, throughout the design process). Ball, L.J., Evans, J.B.T. And Dennis, I. (1994), Cognitive processes in engineering design: A longitudinal study, Ergonomics, 37(11), 1753-1786.

Screen Description Diagram

1. ‘Bits’ for an account page 2. Company info 3. Insurance info for company 4. My (current user) info 5. Other users on this account 6. My sales rep contact info 7. Current account plan 8. Link to change search preferences 9. Date account was created 10.People rarely view or change insurance info 11.Any user can edit anything except other users' info 12.Changing password is the most likely action 13.People might come here to change search preferences (which are on a separate page) http://37signals.com/papers/introtopatterns/

2. Group related bits together A 1. Company info 10. Any user can edit anything except other users' info 2. Insurance info for company B 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info 3. My (current user) info C 11. Changing password is the most likely action 10. Any user can edit anything except other users' info 4. Other users on this account D 10. Any user can edit anything except other users' info E 5. My sales rep contact info 6. Current account plan F 10. Any user can edit anything except other users' info

3. Prioritize Most important: 3. My (current user) info C 11. Changing password is the most likely action 10. Any user can edit anything except other users' info A 1. Company info 10. Any user can edit anything except other users' info G 8. Date account was created E 5. My sales rep contact info Necessary: 2. Insurance info for company B 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info 4. Other users on this account D 10. Any user can edit anything except other users' info 6. Current account plan F 10. Any user can edit anything except other users' info Nice to have: H 7. Link to change search preferences 12. People might come here to change search preferences (which are on a separate page)

4. Design each bit individually A B C E G

5. Put the chunks together

6. Build in software of choice

Create Scenarios/Storyboards

Prototype with Powerpoint Login e-asTTle Welcome, username Log Out News e-asTTle 8-Feb- 2006: e-asTTle will be unavailable on Saturday 8th February due to maintenance. logo 6-Feb-2006: New resources have been added to What’s Next Sign-In Please sign in to your e -asTTle account: Username: ex.myname@myschool.co.nz Password: Forgot Password? Remember me on this computer Sign-In Footer

Learn about design principles

8. Aesthetics & Minimalist Design

8. Aesthetics & Minimalist Design

8. Aesthetics & Minimalist Design http://dev.uxmatters.com/MT/archives/000015.php

8. Aesthetics & Minimalist Design

Patterns

Doing Heuristics Evaluations

Jacob Nielsen’s Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation

Match between the system and the real world

2. Match the system and real world

2. Match the system and the real world

Be Consistent

2. Match the system and the real world

Prevent Errors

5. Error Prevention

Encourage recognition rather than recall

6. Recognition rather than recall

Provide Help

10. Help & Documentation

Other Guidelines • Bruce Tognazzini’s First Principles of Interaction Design http://www.asktog.com/basics/firstPrinciples.html • A good introductory summary from a fellow student http://www.charlieguo.com/web_design_readings.php

Recommended Books

Donald Norman

Steve Krug

Alan Cooper

Alan Cooper

Jenifer Tidwell

Axioms • Interaction Design is not guesswork • Imagine users as very intelligent but very busy • No matter how cool your interface is, less would be better • Software should behave like a considerate human

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

User Interface Design Basics | Usability.gov

The goal of User Interface (UI) design is to anticipate what users might need to do and ensures ... Home > What & Why of Usability > User Interface Design ...
Read more

Principles of User Interface Design - Bokardo.com

Principles of User Interface Design ... In practice this means that someone should be able to predict how an interface element will behave merely by ...
Read more

User Interface Design - Best Practices - Visual Hierarchy Blog

User interface design practices require a strong foundation that can support all its functions.
Read more

Best Practices for User Interface | Android Developers

Best Practices for User Interface. ... Android provides a flexible framework for UI design that allows your app to display different layouts for ...
Read more

User Interface Design - Practice Test Questions & Chapter ...

Test and improve your knowledge of User Interface Design with fun multiple choice exams you can take online with Study.com
Read more

BEST PRACTICES FOR DESIGNING A GRAPHICAL USER INTERFACE

BEST PRACTICES FOR DESIGNING A GRAPHICAL ... Best Practice Guidelines GUI Design ... Ambler, Scott W. User Interface Design Tips, Techniques ...
Read more

User Interface Design Tips, Techniques, and Principles

User interface design ... so you should design your user interface to ... I'm a firm believer in the AM practice Active Stakeholder ...
Read more

User interface - Wikipedia, the free encyclopedia

The user interface (UI), in the ... (man-machine interface). In practice, ... Common practices for interaction specification include user-centered design, ...
Read more

10 User Interface Design Fundamentals - Treehouse Blog

... make sure to remember these 10 user interface design fundamentals. ... Definitely helping all the user interface designers out there ...
Read more

User Interface Design - Best Practice Guidelines ...

Recent Posts. User Interface Design – Best Practice Guidelines; Capturing Software Requirements, User Stories, User Interface and Entities – An Agile ...
Read more