Upload
cefora-cevora
View
108
Download
3
Tags:
Embed Size (px)
DESCRIPTION
© Joost Landsheere
Citation preview
Ux Design course
Learning Snack – 24.10.2013by Joost Landsheere
Elements of Ux design GUI design1.
3Ux Design – Learning snack for Syntra West By Joost Landsheere
Scope
“I see all my work as part of a coherent pattern, moving toward products and services that truly fit human needs”
— Donald Norman
4Ux Design – Learning snack for Syntra West By Joost Landsheere
Gui Design : what is it ?
Experience design
Information architecture
Interaction design
Usability design
focus on organisation en retrievinginformation
focus on creating relations between sequential actions to allow the userto perform tasks
focus on testing en evaluating
combines the other elements to create meaningfull applications for users
GUIDESIGN
5Ux Design – Learning snack for Syntra West By Joost Landsheere
Gui Design : workflow?
6Ux Design – Learning snack for Syntra West
User needs
Site objectives
Functional ContentSpecifications Requirements
Interaction InformationDesign Architecture
abstract conception
concrete completion
task-oriented information-oriented
web as software interface web as hypertext system
User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etcSite objectives : business, creative, or other internally derived goals for the site
User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etcSite objectives : business, creative, or other internally derived goals for the site
Functional Specifications: "feature set":detailed descriptions of functionality the site must include in order to meet user needs
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Information Architecture: structural design of the information space to facilitate intuitive access to content
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense: designing the presentation of information to facilitate understanding
Navigation Design: design of interfaceelements to facilitate the user’s movement trough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
© 2000 Jesse James Garrett
The elements of User Experience & GUI Design
Interface NavigationDesign Design
Information design
Visual Design
Howest • Ux Design Course By Joost Landsheere
7Ux Design – Learning snack for Syntra West By Joost Landsheere
Discovering users — losing ourselves
Resources
resource reliability
Hearsay : 3rd level resource Less reliabele since other people tell you thing about other users. Most easy to
capture within the organization via various resources, eg. : marketing, sales,
management & support
Inferred : 2nd level resource Derivated informationresources: e-mails tosupport, feedback
forms, …
Reported : 1st level resource Reports from internal / external systems
Observed : 1st level resource Your personal user observation
8Ux Design – Learning snack for Syntra West By Joost Landsheere
User profiles - PersonaUser Profile : Name
DescriptionDescribe all relevant personal and professional characteristics
Domain knowledgeBasic | Medium | Advanced
System knowledgeBasic | Medium | Advanced
User patternLow | Average | High
Frequency : Regularity :Intencity:
Expectation Shapers
Usability priorities Learning curve : Memorability : Efficiency :other? :
9Ux Design – Learning snack for Syntra West By Joost Landsheere
Site objectives
Goals vs. objectives
GOALS OBJECTIVES
GOALS = WHAT OBJECTIVES = HOW
Vb. - Make users aware that the global warming is reality
Examples.- Overview of cost per person of global warming from now
within 100 years- use picture gallery to show impact of global warming on
nature- recognise and pin-point the effets of global warming with
examples
Overall statements for the project Specific items to underpin the goal
What is the ‘target’ of the project An objective always starts with an active verb
One project can have multiple goals and each goal can have multiple objectives
Objectives can be measured
10Ux Design – Learning snack for Syntra West By Joost Landsheere
Site objectives
Models• Core methode in User Centred approach• Target to discover design problems and create a good
solution
From Model to Design• Task Models• Content Models• Prototypes• Visualisatie• Walkthroughs
11Ux Design – Learning snack for Syntra West By Joost Landsheere
Requirements
Framework for selecting the technique
Brainstorming,workshops
prototypes
Interviews, work in target environment
Questionnaires, workshops, prototypes
Catch-up Mature
Selling / teachingFuzzy problem
HIGH
LOW HIGHDevelopment Team Experience
Cust
omer
/ U
ser E
xper
ienc
e
12Ux Design – Learning snack for Syntra West By Joost Landsheere
Information ArchitectureMethod Research Type Activity Learn About Project Stage
Open card sorting Generative Organizing Mental modelsOrganizationLabelingRelationships between items
Early user research
Modified Delphi card sorting
Generative Organizing Mental modelsOrganizationLabelingRelationships between items
Early user research
Closed card sorting Evaluative Organizing OrganizationLabeling
Information architecture design
Reverse card sorting Evaluative Finding OrganizationLabelingFindability
Information architecture design
Tree testing Evaluative Finding OrganizationLabelingFindability
Interface design
Usability testing with low-fidelity prototypes
Evaluative Finding OrganizationLabelingFindabilityNavigation designInterface design
Interface design
13Ux Design – Learning snack for Syntra West By Joost Landsheere
Interaction Design
MethodesVisibilityFeedbackAffordancesMappingConstraintsHabituation <> Breakdown
How to design for better interactions ?
14Ux Design – Learning snack for Syntra West By Joost Landsheere
Navigation Design
ModelsHorizontal bar navigationVertical bar navigationTab navigationBreadcrumb navigationTags NavigationSearch NavigationFly-out / drop-down navigationFaceted / guided navigationFooter navigation
15Ux Design – Learning snack for Syntra West By Joost Landsheere
Interface Design
WhatUser Interface Design patterns are recurring solutions that solve common design problems in a specific context.Design patterns are standard reference points for the experienced user interface designer.
Resourceshttp://developer.yahoo.com/ypatterns/
16Ux Design – Learning snack for Syntra West By Joost Landsheere
Information Design
Desktop vs. Mobile2.
18Ux Design – Learning snack for Syntra West By Joost Landsheere
Click vs. gesture
Click distracts attentionGesture follows natural movements and interaction with a physical objectGesture will go beound ‘touch area’
• tactile feedback• gravity & other simulations of
physical behaviour• accelaration sensing• orientation awareness
19Ux Design – Learning snack for Syntra West By Joost Landsheere
Attention for ...
keypad and trackpad to touchscreenslinks to tabs / plans / rowsmulti column to single columnsimple navigationsensors and smartness
20Ux Design – Learning snack for Syntra West By Joost Landsheere
Native vs. webapp
NATIVENATIVE APP WEB APP
Advantages Advantages
• Full access to device capabilities• Integration with other native apps• Off-line operational• ‘Push’ notifications• Seamless design• Runs faster• Dev Frameworks• Installation via app stores
• Cross device support• Quick development• Instant update process• No lock in to app store (no 30% cut)• HTML5 is doing more
Disadvantages Disadvantages
• Device specific• Lock in to device upgrades
• Less functionality• Limited integration with device• Off-line is difficult• Less seamless with other apps
21Ux Design – Learning snack for Syntra West By Joost Landsheere
Ux controls mobile – Android
https://mockupstogo.mybalsamiq.com/projects/android/Android%204%20Controls
22Ux Design – Learning snack for Syntra West By Joost Landsheere
Ux controls mobile – iOS
https://mockupstogo.mybalsamiq.com/projects/ios/iPad%20Controlshttps://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289
23Ux Design – Learning snack for Syntra West By Joost Landsheere
Ux controls desktop
http://developer.yahoo.com/ypatterns/everything.html
Prototyping3.
25Ux Design – Learning snack for Syntra West By Joost Landsheere
Paper prototyping
Modelsused to evaluate the idea behind the drawingused to draw the skeleton of the interface (pointing where which content will appear), while wireframes go beound this skeleton by adding more information and call-outs for functionality)paper is used in early phases to sketch out and test ideas, where tools are used to make you think in depth to optimizeInteractivity can be emulated with paper prototype (watch this video)
26Ux Design – Learning snack for Syntra West By Joost Landsheere
Digital Wireframing
www.balsamiq.comeasy way to create interactive wireframespre-defined UI control librariespossibility to share and interact with other team membersadding basic interaction is added value for IA interaction between different content items
Practice4.
28Ux Design – Learning snack for Syntra West By Joost Landsheere
Project Description
ProblemObesity and resultant Type 2 diabetes are major health concerns throughout the world. For those people wishing to maintain or improve their health, currently existing health-oriented mobile-phone applications provide many usable, useful functions, including medicine-intake monitoring, pain management, weight loss programs, exercises tutoring, and health-indicators tracking (e.g., blood pressure and heart rate). According to the many Diabetes Associations, a combination of exercises, healthier food, and weight control will be more effective to alleviate or prevent diabetes. Unfortunately, seldom do the applications combine many of these functions; they tend to be specialized. Above all, these products do not provide an overall “persuasion path” to change users’ short-term and long-term behavior, leading to a healthier lifestyle.
29Ux Design – Learning snack for Syntra West By Joost Landsheere
The Concept
The ideabrainstorm for different perspectives on the issueThen describe the selected concept in 1 page
30Ux Design – Learning snack for Syntra West By Joost Landsheere
Personas
User profilesResearch and describe the characteristics of the different user profilesmake a description of each persona and add other characteristic details – enrich the profile with a picture of who the persona should represent
31Ux Design – Learning snack for Syntra West By Joost Landsheere
Use Scenarios
Define some real life situations that can be used as use scenarios to test the concept or specific situations
32Ux Design – Learning snack for Syntra West By Joost Landsheere
IA
Information ArchitectureWork out the information architecture based on your concept, site objectives, persona, content requirements & functional specifications
33Ux Design – Learning snack for Syntra West By Joost Landsheere
1st Sketches
Paper prototypingpick 3 screens from your structure and sketch them on papertest the sketches with peers and/or persona to discover their acceptance
Tips to start now !5.
35Ux Design – Learning snack for Syntra West By Joost Landsheere
Tips & trick
1. You are not the user2. You are not the user3. the user is not the designer4. Ux is no cooking book stuff5. go out to observe the user6. Dive into the project theme and become a specialist7. Test early, test often (card sorting, paper prototyping, interactive
wireframes, ...)8. Use accepted resources for UI component Libraries
• iOS : https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289
• Microsoft : http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx• Android : http://developer.android.com/guide/topics/ui/index.html
9. Learn to ask the right questions (be underdog)10.Be skeptical to the answer you get ... always ask ‘why’ 11.Practice ... practice ... practice