Your SlideShare is downloading. ×
0
Ux Design course
Learning Snack – 24.10.2013
by Joost Landsheere
.

Elements of Ux design
GUI design
Scope
“I see all my work as part of a coherent
pattern, moving toward products and services
that truly fit human needs”
— ...
Gui Design : what is it ?
Usability design
focus on testing en evaluating

Interaction design
focus on creating relations ...
Gui Design : workflow?

Ux Design – Learning snack for Syntra West

By JoostLandsheere

5
The elements of User Experience & GUI Design
web as software interface

concrete

completion

Visual Design: graphic treat...
Discovering users — losing ourselves
Resources
resource
Hearsay : 3rd level resource

Less reliabele since other people te...
User profiles - Persona
User Profile :

Name

Description
Describe all relevant personal and
professional characteristics
...
Site objectives
Goals vs. objectives
GOALS

OBJECTIVES

GOALS = WHAT

OBJECTIVES = HOW

Vb.
- Make users aware that the gl...
Site objectives
Models
• Core methode in User Centred approach
• Target to discover design problems and create a good solu...
Requirements
Framework for selecting the technique
HIGH
Mature

Interviews,
work in target environment
Customer / User Exp...
Information Architecture
Method

Research Type

Activity

Learn About

Project Stage

Open card sorting

Generative

Organ...
Interaction Design
Methodes
Visibility
Feedback
Affordances
Mapping
Constraints
Habituation <> Breakdown

How to design fo...
Navigation Design
Models
Horizontal bar navigation
Vertical bar navigation
Tab navigation
Breadcrumb navigation
Tags Navig...
Interface Design
What
User Interface Design patterns are recurring solutions that solve
common design problems in a specif...
Information Design

Ux Design – Learning snack for Syntra West

By JoostLandsheere

16
.

Desktop vs. Mobile
Click vs. gesture
Click distracts attention
Gesture follows natural movements
and interaction with a physical
object
Gestu...
Attention for ...
keypad and trackpad to touchscreens
links to tabs / plans / rows
multi column to single column
simple na...
Native vs. webapp
NATIVE

NATIVE APP

Advantages

•Full access to device capabilities
•Integration with other native apps
...
Ux controls mobile – Android

https://mockupstogo.mybalsamiq.com/projects/android/Android%204%20Controls

Ux Design – Lear...
Ux controls mobile – iOS

https://mockupstogo.mybalsamiq.com/projects/ios/iPad%20Controls
https://developer.apple.com/libr...
Ux controls desktop

http://developer.yahoo.com/ypatterns/everything.html
Ux Design – Learning snack for Syntra West

By J...
.

Prototyping
Paper prototyping
Models
used to evaluate the idea behind the
drawing
used to draw the skeleton of the
interface (pointing...
Digital Wireframing
www.balsamiq.com
easy way to create interactive
wireframes
pre-defined UI control libraries
possibilit...
.

Practice
Project Description
Problem
Obesity and resultant Type 2 diabetes are major health concerns throughout the
world.
For thos...
The Concept
The idea
brainstorm for different perspectives on the issue
Then describe the selected concept in 1 page

Ux D...
Personas
User profiles
Research and describe the characteristics of the different user
profiles
make a description of each...
Use Scenarios
Define some real life situations that can be used as use scenarios to
test the concept or specific situation...
IA
Information Architecture
Work out the information architecture based on your concept, site
objectives, persona, content...
1st Sketches
Paper prototyping
pick 3 screens from your structure and sketch them on paper
test the sketches with peers an...
.

Tips to start now !
Tips & trick
1.
2.
3.
4.
5.
6.
7.
8.

You are not the user
You are not the user
the user is not the designer
Ux is no cook...
Upcoming SlideShare
Loading in...5
×

Cevora Learning Snack: UX Design

944

Published on

© Joost Landsheere

Published in: Design, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
944
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Tribal War:Goal : WinActivities : attacking
  • Transcript of "Cevora Learning Snack: UX Design"

    1. 1. Ux Design course Learning Snack – 24.10.2013 by Joost Landsheere
    2. 2. . Elements of Ux design GUI design
    3. 3. Scope “I see all my work as part of a coherent pattern, moving toward products and services that truly fit human needs” — Donald Norman Ux Design – Learning snack for Syntra West By JoostLandsheere 3
    4. 4. Gui Design : what is it ? Usability design focus on testing en evaluating Interaction design focus on creating relations between sequential actions to allow the user to perform tasks Experience design combines the other elements to create meaningfull applications for users GUI DESIGN Information architecture focus on organisation en retrieving information Ux Design – Learning snack for Syntra West By JoostLandsheere 4
    5. 5. Gui Design : workflow? Ux Design – Learning snack for Syntra West By JoostLandsheere 5
    6. 6. The elements of User Experience & GUI Design web as software interface concrete completion Visual Design: graphic treatment of interface elements (the "look" in "lookand-feel") Interface Design Interaction Design Functional Specifications Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etc Site objectives : business, creative, or other internally derived goals for the site Navigation Design: design of interface elements to facilitate the user’s movement trough the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Information Architecture Information Architecture: structural design of the information space to facilitate intuitive access to content Content Requirements Content Requirements: definition of content elements required in the site in order to meet user needs User needs Site objectives abstract Ux Design – Learning snack for Syntra West © 2000 Jesse James Garrett Navigation Design Information design Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality task-oriented Visual Design: visual treatment of text, graphic page elements and navigational components Visual Design Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding web as hypertext system User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etc Site objectives : business, creative, or other internally derived goals for the site conception Howest • Ux Design Course information-oriented By JoostLandsheere 6
    7. 7. Discovering users — losing ourselves Resources resource 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 information resources: e-mails tosupport, feedback forms, … Reported : 1st level resource Reports from internal / external systems Observed : 1st level resource Ux Design – Learning snack for Syntra West reliability Your personal user observation By JoostLandsheere 7
    8. 8. User profiles - Persona User Profile : Name Description Describe all relevant personal and professional characteristics Domain knowledge Basic | Medium | Advanced System knowledge Basic | Medium | Advanced User pattern Low | Average | High Frequency : Regularity : Intencity: Expectation Shapers Usability priorities Ux Design – Learning snack for Syntra West Learning curve : Memorability : Efficiency : other? : By JoostLandsheere 8
    9. 9. 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 Ux Design – Learning snack for Syntra West By JoostLandsheere 9
    10. 10. 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 Ux Design – Learning snack for Syntra West By JoostLandsheere 10
    11. 11. Requirements Framework for selecting the technique HIGH Mature Interviews, work in target environment Customer / User Experience Catch-up Questionnaires, workshops, prototypes Fuzzy problem Selling / teaching Brainstorming, workshops prototypes LOW Ux Design – Learning snack for Syntra West HIGH Development Team Experience By JoostLandsheere 11
    12. 12. Information Architecture Method Research Type Activity Learn About Project Stage Open card sorting Generative Organizing Mentalmodels Organization Labeling Relationships between items Early user research Modified Delphi card sorting Generative Organizing Mental models Organization Labeling Relationships between items Early user research Closed card sorting Evaluative Organizing Organization Labeling Information architecture design Reverse card sorting Evaluative Finding Organization Labeling Findability Information architecture design Tree testing Evaluative Finding Organization Labeling Findability Interface design Usability testing with low-fidelity prototypes Evaluative Finding Organization Labeling Findability Navigation design Interface design Interface design Ux Design – Learning snack for Syntra West By JoostLandsheere 12
    13. 13. Interaction Design Methodes Visibility Feedback Affordances Mapping Constraints Habituation <> Breakdown How to design for better interactions ? Ux Design – Learning snack for Syntra West By JoostLandsheere 13
    14. 14. Navigation Design Models Horizontal bar navigation Vertical bar navigation Tab navigation Breadcrumb navigation Tags Navigation Search Navigation Fly-out / drop-down navigation Faceted / guided navigation Footer navigation Ux Design – Learning snack for Syntra West By JoostLandsheere 14
    15. 15. Interface Design What User 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. Resources http://developer.yahoo.com/ypatterns/ Ux Design – Learning snack for Syntra West By JoostLandsheere 15
    16. 16. Information Design Ux Design – Learning snack for Syntra West By JoostLandsheere 16
    17. 17. . Desktop vs. Mobile
    18. 18. Click vs. gesture Click distracts attention Gesture follows natural movements and interaction with a physical object Gesture will go beound „touch area‟ • • • • tactile feedback gravity & other simulations of physical behaviour accelaration sensing orientation awareness Ux Design – Learning snack for Syntra West By JoostLandsheere 18
    19. 19. Attention for ... keypad and trackpad to touchscreens links to tabs / plans / rows multi column to single column simple navigation sensors and smartness Ux Design – Learning snack for Syntra West By JoostLandsheere 19
    20. 20. Native vs. webapp NATIVE NATIVE APP 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 Disadvantages •Device specific •Lock in to device upgrades Ux Design – Learning snack for Syntra West WEB APP Advantages •Cross device support •Quick development •Instant update process •No lock in to app store (no 30% cut) •HTML5 is doing more Disadvantages •Less functionality •Limited integration with device •Off-line is difficult •Less seamless with other apps By JoostLandsheere 20
    21. 21. Ux controls mobile – Android https://mockupstogo.mybalsamiq.com/projects/android/Android%204%20Controls Ux Design – Learning snack for Syntra West By JoostLandsheere 21
    22. 22. Ux controls mobile – iOS https://mockupstogo.mybalsamiq.com/projects/ios/iPad%20Controls https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289 Ux Design – Learning snack for Syntra West By JoostLandsheere 22
    23. 23. Ux controls desktop http://developer.yahoo.com/ypatterns/everything.html Ux Design – Learning snack for Syntra West By JoostLandsheere 23
    24. 24. . Prototyping
    25. 25. Paper prototyping Models used to evaluate the idea behind the drawing used 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 optimize Interactivity can be emulated with paper prototype (watch this video) Ux Design – Learning snack for Syntra West By JoostLandsheere 25
    26. 26. Digital Wireframing www.balsamiq.com easy way to create interactive wireframes pre-defined UI control libraries possibility to share and interact with other team members adding basic interaction is added value for IA interaction between different content items Ux Design – Learning snack for Syntra West By JoostLandsheere 26
    27. 27. . Practice
    28. 28. Project Description Problem Obesity 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. Ux Design – Learning snack for Syntra West By JoostLandsheere 28
    29. 29. The Concept The idea brainstorm for different perspectives on the issue Then describe the selected concept in 1 page Ux Design – Learning snack for Syntra West By JoostLandsheere 29
    30. 30. Personas User profiles Research and describe the characteristics of the different user profiles make a description of each persona and add other characteristic details – enrich the profile with a picture of who the persona should represent Ux Design – Learning snack for Syntra West By JoostLandsheere 30
    31. 31. Use Scenarios Define some real life situations that can be used as use scenarios to test the concept or specific situations Ux Design – Learning snack for Syntra West By JoostLandsheere 31
    32. 32. IA Information Architecture Work out the information architecture based on your concept, site objectives, persona, content requirements & functional specifications Ux Design – Learning snack for Syntra West By JoostLandsheere 32
    33. 33. 1st Sketches Paper prototyping pick 3 screens from your structure and sketch them on paper test the sketches with peers and/or persona to discover their acceptance Ux Design – Learning snack for Syntra West By JoostLandsheere 33
    34. 34. . Tips to start now !
    35. 35. Tips & trick 1. 2. 3. 4. 5. 6. 7. 8. You are not the user You are not the user the user is not the designer Ux is no cooking book stuff go out to observe the user Dive into the project theme and become a specialist Test early, test often (card sorting, paper prototyping, interactive wireframes, ...) Use accepted resources for UI component Libraries • • • iOS : https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP4001328 9 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 Ux Design – Learning snack for Syntra West By JoostLandsheere 35
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×