SlideShare a Scribd company logo
Beginner's Guide to UI Design

             Máirín Duffy <duffy@redhat.com>
      Interaction Designer, RHN Satellite Engineering
                       Red Hat, Inc.


                               
Overview




            
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



                                              
Research Project Definition
    ➔   What is it that I am building?
    ➔   What is it that I am not building?
    ➔   Why am I building it?




                                 
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




                                
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




                                                    
Research Users
    How do you answer these questions?
    ➔   Market research & product manager
    ➔   Interviews with target users (on­site or phone)
    ➔   Shadowing target users
    ➔   Surveys
    ➔   Any user data you may have (bugzilla, mailing 
        lists, rt, etc.)

                                
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?


                                
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

                                 
Sketch Screen Flow
    ➔   Where will users begin?
    ➔   Per task, what path can users follow to 
        complete the task?
    ➔   Define needed screens and dialogs




                                
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)



                               
     
     
     
     
     
     
     
Test 5­Minute Usability Test
    ➔   Short – only a couple of tasks
    ➔   Provide mockup ('fake screenshot')
    ➔   Ask how user would complete task given 
        provided mockup (watch them demonstrate)




                                
Test 5­Minute Usability Test




                  
Finalize Design Demo




                
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


                               
Resources Sketch
    ➔   Designing From Both Sides of the Screen 
        Ellen Isaacs and Alan Walendowski
    ➔   Designing Interfaces Jenifer Tidwell




                                
Resources Test
    ➔   Usability Engineering Jakob Nielsen
    ➔   Don't Make Me Think Steve Krug




                               
Resources General UI Design
    ➔   The Design of Everyday Things Don Norman
    ➔   The Inmates are Running the Asylum Alan 
        Cooper




                              
Questions? Comments? 
    ➔   Email me, duffy@redhat.com
    ➔   Find these slides at: 
        http://people.redhat.com/duffy/guadec/
    ➔   Stop by the usability clinic at 5 PM today (in 
        the Recital hall)
    ➔   usability­list@gnome.org



                                 

More Related Content

What's hot

Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
Zdeněk Lanc
 
Design Workshop II @ Cornell Tech
Design Workshop II @ Cornell TechDesign Workshop II @ Cornell Tech
Design Workshop II @ Cornell Tech
Zaid Haque
 
User Experience for Software Engineers
User Experience for Software EngineersUser Experience for Software Engineers
User Experience for Software Engineers
Dakshika Jayathilaka
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
sawsan slii
 
UX psychology for software engineers
UX psychology for software engineersUX psychology for software engineers
UX psychology for software engineers
Dakshika Jayathilaka
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
Mohamed Shehata
 
What Design Means to Me
What Design Means to MeWhat Design Means to Me
What Design Means to Me
Carolann Merchant
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
 
IA basics
IA basicsIA basics
IA basics
Zdeněk Lanc
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For EverybodyEmpatika
 
Game Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface DesignGame Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface Design
David Farrell
 
Mobile User Experience - Inductive Design Process
Mobile User Experience - Inductive Design ProcessMobile User Experience - Inductive Design Process
Mobile User Experience - Inductive Design Process
Jennifer Shurley
 
Game Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision LectureGame Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision LectureDavid Farrell
 
Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613
Centerline Digital
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
Deepak Sahni
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
The Wisdom Daily
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
Prottay Karim
 
Game Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutGame Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutDavid Farrell
 
An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)
Neil Turner
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
Tunde Ojediran
 

What's hot (20)

Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Design Workshop II @ Cornell Tech
Design Workshop II @ Cornell TechDesign Workshop II @ Cornell Tech
Design Workshop II @ Cornell Tech
 
User Experience for Software Engineers
User Experience for Software EngineersUser Experience for Software Engineers
User Experience for Software Engineers
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
UX psychology for software engineers
UX psychology for software engineersUX psychology for software engineers
UX psychology for software engineers
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
What Design Means to Me
What Design Means to MeWhat Design Means to Me
What Design Means to Me
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
IA basics
IA basicsIA basics
IA basics
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
Game Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface DesignGame Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface Design
 
Mobile User Experience - Inductive Design Process
Mobile User Experience - Inductive Design ProcessMobile User Experience - Inductive Design Process
Mobile User Experience - Inductive Design Process
 
Game Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision LectureGame Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision Lecture
 
Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
 
Game Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutGame Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI Layout
 
An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 

Viewers also liked

What The Fuck Is UX Design
What The Fuck Is UX DesignWhat The Fuck Is UX Design
What The Fuck Is UX Design
Arun Pattnaik
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a Nutshell
Ying Jiang
 
User-centered UX: Bringing the User into the Design Process
User-centered UX: Bringing the User into the Design ProcessUser-centered UX: Bringing the User into the Design Process
User-centered UX: Bringing the User into the Design Process
Dave Cooksey
 
Content-first UX Design: What video games teach us about UX
Content-first UX Design: What video games teach us about UXContent-first UX Design: What video games teach us about UX
Content-first UX Design: What video games teach us about UX
Steph Hay
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
Evan Samek
 
Making UX Matter to Your Company
Making UX Matter to Your CompanyMaking UX Matter to Your Company
Making UX Matter to Your Company
Wendy Johansson
 
The Future of UX: Designing Data Experiences
The Future of UX: Designing Data ExperiencesThe Future of UX: Designing Data Experiences
The Future of UX: Designing Data Experiences
Eva Willis
 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
Patrick McNeil
 
UX and UI - Designing for Mobile
UX and UI - Designing for MobileUX and UI - Designing for Mobile
UX and UI - Designing for Mobile
BuiltByHQ
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
Christina Wodtke
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
Sara Cannon
 
What is ux?
What is ux?What is ux?
What is ux?
Géraud de LAVAL
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
BuiltByHQ
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
How to Contribute to GNOME as an Artist
How to Contribute to GNOME as an ArtistHow to Contribute to GNOME as an Artist
How to Contribute to GNOME as an ArtistMáirín Duffy
 
Community-Led Open Source Art: The Fedora Design Team
Community-Led Open Source Art: The Fedora Design TeamCommunity-Led Open Source Art: The Fedora Design Team
Community-Led Open Source Art: The Fedora Design TeamMáirín Duffy
 
A Tour Through Open Source Creative Tools.Take4
A Tour Through Open Source Creative Tools.Take4A Tour Through Open Source Creative Tools.Take4
A Tour Through Open Source Creative Tools.Take4Máirín Duffy
 
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UIHyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
Máirín Duffy
 

Viewers also liked (20)

What The Fuck Is UX Design
What The Fuck Is UX DesignWhat The Fuck Is UX Design
What The Fuck Is UX Design
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a Nutshell
 
User-centered UX: Bringing the User into the Design Process
User-centered UX: Bringing the User into the Design ProcessUser-centered UX: Bringing the User into the Design Process
User-centered UX: Bringing the User into the Design Process
 
Content-first UX Design: What video games teach us about UX
Content-first UX Design: What video games teach us about UXContent-first UX Design: What video games teach us about UX
Content-first UX Design: What video games teach us about UX
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
Making UX Matter to Your Company
Making UX Matter to Your CompanyMaking UX Matter to Your Company
Making UX Matter to Your Company
 
The Future of UX: Designing Data Experiences
The Future of UX: Designing Data ExperiencesThe Future of UX: Designing Data Experiences
The Future of UX: Designing Data Experiences
 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
 
UX and UI - Designing for Mobile
UX and UI - Designing for MobileUX and UI - Designing for Mobile
UX and UI - Designing for Mobile
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
What is ux?
What is ux?What is ux?
What is ux?
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
How to Contribute to GNOME as an Artist
How to Contribute to GNOME as an ArtistHow to Contribute to GNOME as an Artist
How to Contribute to GNOME as an Artist
 
Design Bounties
Design BountiesDesign Bounties
Design Bounties
 
Community-Led Open Source Art: The Fedora Design Team
Community-Led Open Source Art: The Fedora Design TeamCommunity-Led Open Source Art: The Fedora Design Team
Community-Led Open Source Art: The Fedora Design Team
 
A Tour Through Open Source Creative Tools.Take4
A Tour Through Open Source Creative Tools.Take4A Tour Through Open Source Creative Tools.Take4
A Tour Through Open Source Creative Tools.Take4
 
Hyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UIHyperkitty: Updating Mailman's UI
Hyperkitty: Updating Mailman's UI
 
How To Theme Fedora
How To Theme FedoraHow To Theme Fedora
How To Theme Fedora
 

Similar to Beginner's Guide to UI Design

Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
Patrick McNeil
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshopPatrick McNeil
 
DIY Usability
DIY UsabilityDIY Usability
DIY Usability
Jan Moons
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
STC India UX SIG
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
Karl Kaufmann
 
PxS'12 - week 1 - Introduction
PxS'12 - week 1 - IntroductionPxS'12 - week 1 - Introduction
PxS'12 - week 1 - Introductionhendrikknoche
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionhendrikknoche
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniqueshendrikknoche
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
European Innovation Academy
 
You Don't Know C.R.A.P. about UX/UI
You Don't Know C.R.A.P. about UX/UIYou Don't Know C.R.A.P. about UX/UI
You Don't Know C.R.A.P. about UX/UI
Lindsay Tabas
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
Sarah Dutkiewicz
 
Meta Refresh: High on Design
Meta Refresh: High on DesignMeta Refresh: High on Design
Meta Refresh: High on Design
Tulsi Dharmarajan
 
MIT Course - What is Experience Design
MIT Course - What is Experience DesignMIT Course - What is Experience Design
MIT Course - What is Experience Design
Marisa Gallagher
 
User experience design process
User experience design processUser experience design process
User experience design process
Mike McCoy
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
leisa reichelt
 
Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web Designers
Ben Woods
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
Preeti Mishra
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
Sarah Dutkiewicz
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
Kshitiz Anand
 
User experience for drupal
User experience for drupalUser experience for drupal
User experience for drupalAnne Stefanyk
 

Similar to Beginner's Guide to UI Design (20)

Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
 
DIY Usability
DIY UsabilityDIY Usability
DIY Usability
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
PxS'12 - week 1 - Introduction
PxS'12 - week 1 - IntroductionPxS'12 - week 1 - Introduction
PxS'12 - week 1 - Introduction
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniques
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
 
You Don't Know C.R.A.P. about UX/UI
You Don't Know C.R.A.P. about UX/UIYou Don't Know C.R.A.P. about UX/UI
You Don't Know C.R.A.P. about UX/UI
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Meta Refresh: High on Design
Meta Refresh: High on DesignMeta Refresh: High on Design
Meta Refresh: High on Design
 
MIT Course - What is Experience Design
MIT Course - What is Experience DesignMIT Course - What is Experience Design
MIT Course - What is Experience Design
 
User experience design process
User experience design processUser experience design process
User experience design process
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
 
Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web Designers
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
User experience for drupal
User experience for drupalUser experience for drupal
User experience for drupal
 

More from Máirín Duffy

Inkscape for Beginners Bootcamp
Inkscape for Beginners Bootcamp Inkscape for Beginners Bootcamp
Inkscape for Beginners Bootcamp
Máirín Duffy
 
Digital Art using Gimp & Inkscape
Digital Art using Gimp & InkscapeDigital Art using Gimp & Inkscape
Digital Art using Gimp & Inkscape
Máirín Duffy
 
A Tour Through Open Source Creative Tools
A Tour Through Open Source Creative ToolsA Tour Through Open Source Creative Tools
A Tour Through Open Source Creative Tools
Máirín Duffy
 
Design Bounties: Adventures in Recruiting New Free Software Ninjas
Design Bounties: Adventures in Recruiting New Free Software NinjasDesign Bounties: Adventures in Recruiting New Free Software Ninjas
Design Bounties: Adventures in Recruiting New Free Software Ninjas
Máirín Duffy
 
Getting Involved in an Free/Open Source Operating System
Getting Involved in an Free/Open Source Operating SystemGetting Involved in an Free/Open Source Operating System
Getting Involved in an Free/Open Source Operating SystemMáirín Duffy
 
Designing UI Mockups in Inkscape
Designing UI Mockups in InkscapeDesigning UI Mockups in Inkscape
Designing UI Mockups in InkscapeMáirín Duffy
 
Digital Art Using Gimp and Inkscape
Digital Art Using Gimp and InkscapeDigital Art Using Gimp and Inkscape
Digital Art Using Gimp and InkscapeMáirín Duffy
 

More from Máirín Duffy (7)

Inkscape for Beginners Bootcamp
Inkscape for Beginners Bootcamp Inkscape for Beginners Bootcamp
Inkscape for Beginners Bootcamp
 
Digital Art using Gimp & Inkscape
Digital Art using Gimp & InkscapeDigital Art using Gimp & Inkscape
Digital Art using Gimp & Inkscape
 
A Tour Through Open Source Creative Tools
A Tour Through Open Source Creative ToolsA Tour Through Open Source Creative Tools
A Tour Through Open Source Creative Tools
 
Design Bounties: Adventures in Recruiting New Free Software Ninjas
Design Bounties: Adventures in Recruiting New Free Software NinjasDesign Bounties: Adventures in Recruiting New Free Software Ninjas
Design Bounties: Adventures in Recruiting New Free Software Ninjas
 
Getting Involved in an Free/Open Source Operating System
Getting Involved in an Free/Open Source Operating SystemGetting Involved in an Free/Open Source Operating System
Getting Involved in an Free/Open Source Operating System
 
Designing UI Mockups in Inkscape
Designing UI Mockups in InkscapeDesigning UI Mockups in Inkscape
Designing UI Mockups in Inkscape
 
Digital Art Using Gimp and Inkscape
Digital Art Using Gimp and InkscapeDigital Art Using Gimp and Inkscape
Digital Art Using Gimp and Inkscape
 

Recently uploaded

CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docxCHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
ngochaavk33a
 
UNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the NatureUNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the Nature
Chandrakant Divate
 
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docxÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
ngochaavk33a
 
Collocation thường gặp trong đề thi THPT Quốc gia.pdf
Collocation thường gặp trong đề thi THPT Quốc gia.pdfCollocation thường gặp trong đề thi THPT Quốc gia.pdf
Collocation thường gặp trong đề thi THPT Quốc gia.pdf
ngochaavk33a
 
Program Your Destiny eBook - Destiny University.pdf
Program Your Destiny eBook - Destiny University.pdfProgram Your Destiny eBook - Destiny University.pdf
Program Your Destiny eBook - Destiny University.pdf
Michael Herlache, MBA
 
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINTSOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
ssuser8d5e2d1
 
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptxEthical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
TANMAYJAIN511570
 

Recently uploaded (7)

CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docxCHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
CHUYÊN ĐỀ READING ÔN THI HSG THPT HAY.docx
 
UNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the NatureUNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the Nature
 
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docxÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
ÔN TẬP CỤM THÀNH NGỮ TIẾNG ANH CỰC HAY.docx
 
Collocation thường gặp trong đề thi THPT Quốc gia.pdf
Collocation thường gặp trong đề thi THPT Quốc gia.pdfCollocation thường gặp trong đề thi THPT Quốc gia.pdf
Collocation thường gặp trong đề thi THPT Quốc gia.pdf
 
Program Your Destiny eBook - Destiny University.pdf
Program Your Destiny eBook - Destiny University.pdfProgram Your Destiny eBook - Destiny University.pdf
Program Your Destiny eBook - Destiny University.pdf
 
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINTSOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
SOCIOLOGY PPT. SOCIAL SECURITY POWER POINT
 
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptxEthical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
Ethical_dilemmas_MDI_Gurgaon-Business Ethics Case 1.pptx
 

Beginner's Guide to UI Design

  • 1. Beginner's Guide to UI Design Máirín Duffy <duffy@redhat.com> Interaction Designer, RHN Satellite Engineering Red Hat, Inc.    
  • 3. 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    
  • 4. Research Project Definition ➔ What is it that I am building? ➔ What is it that I am not building? ➔ Why am I building it?    
  • 5. 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    
  • 6. 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    
  • 7. Research Users How do you answer these questions? ➔ Market research & product manager ➔ Interviews with target users (on­site or phone) ➔ Shadowing target users ➔ Surveys ➔ Any user data you may have (bugzilla, mailing  lists, rt, etc.)    
  • 8. 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?    
  • 9. 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    
  • 10. Sketch Screen Flow ➔ Where will users begin? ➔ Per task, what path can users follow to  complete the task? ➔ Define needed screens and dialogs    
  • 11. 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)    
  • 12.    
  • 13.    
  • 14.    
  • 15.    
  • 16.    
  • 17.    
  • 18.    
  • 19. Test 5­Minute Usability Test ➔ Short – only a couple of tasks ➔ Provide mockup ('fake screenshot') ➔ Ask how user would complete task given  provided mockup (watch them demonstrate)    
  • 22. 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    
  • 23. Resources Sketch ➔ Designing From Both Sides of the Screen  Ellen Isaacs and Alan Walendowski ➔ Designing Interfaces Jenifer Tidwell    
  • 24. Resources Test ➔ Usability Engineering Jakob Nielsen ➔ Don't Make Me Think Steve Krug    
  • 25. Resources General UI Design ➔ The Design of Everyday Things Don Norman ➔ The Inmates are Running the Asylum Alan  Cooper    
  • 26. Questions? Comments?  ➔ Email me, duffy@redhat.com ➔ Find these slides at:  http://people.redhat.com/duffy/guadec/ ➔ Stop by the usability clinic at 5 PM today (in  the Recital hall) ➔ usability­list@gnome.org