Download - Beginner's Guide to UI Design
![Page 1: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/1.jpg)
Beginner's Guide to UI Design
Máirín Duffy <[email protected]>Interaction Designer, RHN Satellite Engineering
Red Hat, Inc.
![Page 2: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/2.jpg)
Overview
![Page 3: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/3.jpg)
Overview
➔ Research goals, users, tasks, technology
➔ Sketch screen flow, screen design, widget choices
➔ Test 5 minute usability studies, document shortcomings
➔ Finalize Design final mockups and specification
➔ Resources where to go for more details & guidance
![Page 4: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/4.jpg)
Research Project Definition
➔ What is it that I am building?➔ What is it that I am not building?➔ Why am I building it?
![Page 5: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/5.jpg)
Research Project Definition
How do you answer these questions?➔ In the professional world: market research,
product manager➔ In the FLOSS world: your interests and
motivations
![Page 6: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/6.jpg)
Research Users
➔ Who will use this application?Basic/Intermediate/Expert?Environment?Languages/Culture?
➔ What goals do they have?Why will they use this app in the first place?
➔ What tasks will they need to perform?How frequently will users perform them?How many users will perform them?Prioritization
![Page 7: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/7.jpg)
Research Users
How do you answer these questions?➔ Market research & product manager➔ Interviews with target users (onsite or phone)➔ Shadowing target users➔ Surveys➔ Any user data you may have (bugzilla, mailing
lists, rt, etc.)
![Page 8: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/8.jpg)
Research Knowledge Domain
➔ What domain of knowledge does this application fit into?
➔ How do folks get their jobs done in this domain today?
➔ What other current applications are there in this same domain ('competitive analysis')
➔ How do people use those applications today?
![Page 9: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/9.jpg)
Research Knowledge Domain
How do you answer these questions?➔ Interviews, shadowing, surveys➔ Read through the most popular books on the
topic (ask what they are!)➔ Mailing lists / forums / IRC channels where
professionals in the domain hang out➔ Try out the existing tools for yourself
![Page 10: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/10.jpg)
Sketch Screen Flow
➔ Where will users begin?➔ Per task, what path can users follow to
complete the task?➔ Define needed screens and dialogs
![Page 11: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/11.jpg)
Sketch Screen Design
Per screen on flow diagram:➔ What are users trying to do here? ➔ What data/context will help them better make a
decision / complete their task?➔ How might that best be arranged here?
(consult GNOME HIG)
![Page 12: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/12.jpg)
![Page 13: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/13.jpg)
![Page 14: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/14.jpg)
![Page 15: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/15.jpg)
![Page 16: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/16.jpg)
![Page 17: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/17.jpg)
![Page 18: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/18.jpg)
![Page 19: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/19.jpg)
Test 5Minute Usability Test
➔ Short – only a couple of tasks➔ Provide mockup ('fake screenshot')➔ Ask how user would complete task given
provided mockup (watch them demonstrate)
![Page 20: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/20.jpg)
Test 5Minute Usability Test
![Page 21: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/21.jpg)
Finalize Design Demo
![Page 22: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/22.jpg)
Resources Research
➔ Contextual Design Hugh Beyer and Karen Holtzblatt
➔ About Face 3 Alan Cooper➔ User and Task Analysis for Interface Design
Joann Hackos & Janice Redish➔ Observing the User Experience Mike
Kuniavsky
![Page 23: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/23.jpg)
Resources Sketch
➔ Designing From Both Sides of the Screen Ellen Isaacs and Alan Walendowski
➔ Designing Interfaces Jenifer Tidwell
![Page 24: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/24.jpg)
Resources Test
➔ Usability Engineering Jakob Nielsen➔ Don't Make Me Think Steve Krug
![Page 25: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/25.jpg)
Resources General UI Design
➔ The Design of Everyday Things Don Norman➔ The Inmates are Running the Asylum Alan
Cooper
![Page 26: Beginner's Guide to UI Design](https://reader034.vdocuments.net/reader034/viewer/2022051322/540575018d7f72a6768b4c20/html5/thumbnails/26.jpg)
Questions? Comments?
➔ Email me, [email protected]➔ Find these slides at:
http://people.redhat.com/duffy/guadec/➔ Stop by the usability clinic at 5 PM today (in
the Recital hall)➔ usability[email protected]