Cevora Learning Snack: UX Design

1,719 views

Published on

© Joost Landsheere

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

No Downloads
Views
Total views
1,719
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Tribal War:Goal : WinActivities : attacking
  • 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

    ×