Exploring the world of UX
•
2 likes•457 views
This document provides an overview of user experience (UX) design. It discusses the four key elements of UX: value, usability, adoptability, and desirability. It then describes several UX design techniques including card sorting, interactive sketching notation, wireframing, usability guidelines, and the system usability scale questionnaire. The document encourages exploring additional resources to learn more about UX and provides examples of applying some of the techniques through interactive games.
Recommended
More Related Content
Similar to Exploring the world of UX
Similar to Exploring the world of UX (20)
More from Frederic Vandaele
More from Frederic Vandaele (13)
Recently uploaded
Recently uploaded (20)
Exploring the world of UX
- 1. UX Exploring the world of User Experience Twitter: @FredVandaele frederic.vandaele@trasysgroup.com v3 - August 2012
- 3. “UX is the Science and Art of designing a Product”
- 4. 4 Elements of UX VALUE USABILITY Is it useful ? Is it easy to use ? ADOPTABILITY DESIRABILITY Is it easy to start using ? Is it fun and engaging ?
- 6. Techniques
- 8. Card Sorting • A method for determining how users mentally group your website’s content – Results are derived from the semantic networks of the users – Semantic networks are vast webs of connections between concepts, determined by our learning and experiences • 2 Types: Open & Closed
- 10. min
- 12. Interactive Sketching Notation • ISN fuses user actions and screen sketches • Simple and standardized rules – What the user see (greys, blacks and blues) – What the user do (red) gnihcteks/ac.ikswonil.www//:ptth ngiseD noitcaretnI ikswoniL :stiderC esneciL adanaC 5.2 ekilA erahS-noitubirttA snommoC evitaerC eht rednu decnecil si krow sihT
- 13. ISN - Screens
- 14. ISN – User Actions
- 15. ISN – User Actions
- 16. ISN – Variation & notes
- 17. The ISN game Describe a sale process on Amazon – John is looking for a new TV – With smart/internet feature – “green” product – Likes Sony (but not exclusive)
- 18. min
- 20. Wireframe “Wireframe describes a web site or application using black and white lines, text and boxes.” • Extremely fast way of developing the layout, navigation and usability of a website • Quick and easy to change enabling the creation of many variations at minimal cost
- 21. Design process is like a conversation
- 22. Wireframe game Design a “Book Your International Flight” order form
- 23. min
- 26. Usability Guidelines 247 web usability guidelines Dr. David Travis The Research-Based Web Design & Usability Guidelines Usability.gov
- 27. Usability Guidelines “Evaluate the form designed by another group in the previous game”
- 28. min
- 30. System Usability Scale • John Brooke (1986) • The most used questionnaire for measuring perceptions of usability • 10 item questionnaire with 5 response options • Fixed response format
- 31. Scoring SUS • For odd items = user response -1 • For even items = 5 - user response • Add up and multiply by 2.5 • This create a 0 to 100 scale • Average SUS score from all 500 studies is 68
- 32. Other useful techniques • URL • Personas • Prototyping • Eye tracking • Heuristic Evaluation • Microsoft Desirability Toolkit • CSUQ, QUIS, SUMI, …
- 33. One more thing …
- 35. Go further • Usability.gov • useit.com • userfocus.co.uk
Editor's Notes
- What’s your expectations ? Pick 3 post it and writing down what are your expectations about this seminar. Put it on the wall, look at what other said, cluster if possible
- Dr. Jemison (TED Speaker) says it's foolish to even think in terms of having to choose between being analytical or being intuitive and likens this false choice to having to choose between being idealistic or realistic. "You need both," she says. Science is about fact…until it’s no longer a fact. Art is about arguing meanings, feelings, and contesting views. Science is about understanding the world, what’s in it, what’s beyond it. Art is about searching within, expanding the world, and determining perceptions. Science is about natural order. Art is about justification of thought. Science is about advancing, moving forward, discovery. Art is about searching, moving in all directions, discovery. Science is about reason and development. Art is about reason and development. Science is about discovering significance. Art is about giving significance. Science is about forming probabilities. Art is about endless possibilities. Science doesn’t need Art, but it likes having Art around. Art doesn’t need Science, but it likes having Science around.
- Some people mistakenly use the terms user experience and usability almost interchangeably. However, usability is increasingly being used to refer specifically to the ease with which users can complete their intended tasks, and is closely associated with usability testing . Therefore, many perceive usability to be a rather tactical aspect of product design. In contrast, UX professionals use the term user experience much more broadly, to cover everything ranging from ease of use to user engagement to visual appeal. User experience better captures all of the psychological and behavioral aspects of users’ interactions with products.
- Visual comp = comprehensive layout or comprehensive, usually shortened to comp , is the page layout of a proposed design as initially presented by the designer to a client, showing the relative positions of text and illustrations before the specific content of those elements has been decided on, as a rough draft of the final layout in which to build around.
- Business_Objectives Card_sorting Process_task_diagrams Site_Map Prototype Style_Guide Heuristic_Evaluation SUS User_Goals Personas Story_board Thumbnails Wireframe Usability_Testing ISO_20282
- Could be used with your users keep some empty cards (if needed) not necessary translated into a navigation menu but useful anyway
- Election Website – 4 groups Group type A: Open Create Groups Label Groups Group type B: Closed Assign items to categories
- 1 group presents
- Focus on major elements before thinking about details Draw a small representation of your design, roughing out boxes and greeking lines of text
- The screen is the basic unit of an interface. Screens can be represented in different ways either by showing their full or partial size. Most screens in this notation are shown with a thicker black outline and an optional title above in the top left.
- Screens are tied together with user actions in order to tell a story. Each story may have a scenario as a starting point that triggers the narrative and provides a background context. The story then unfolds as action arrows (with optional events, transitions or conditionals) are used to describe what the user has done with the interface (clicks, drags, key presses, etc). All user actions are conveyed in red and all actionable items are shown in blue.
- Screens are tied together with user actions in order to tell a story. Each story may have a scenario as a starting point that triggers the narrative and provides a background context. The story then unfolds as action arrows (with optional events, transitions or conditionals) are used to describe what the user has done with the interface (clicks, drags, key presses, etc). All user actions are conveyed in red and all actionable items are shown in blue.
- Achieving variation of your ideas is a very powerful quality that sketching in particular affords. Designers in early phases often diverge conceptually in order to generate more ideas which can be further discussed, evaluated and selected from. This sketching notation also supports the ability to branch off with multiple related ideas. Here, this is mainly done by using lettering (A, B, C, D, etc.) and vertically aligning the alternatives. Notes in this notation are mostly used to help the designer with a potential discussion - sketches are conversation starters after all. In this context, notes are self targeted reminders with the intention of raising advantages, disadvantages, and uncertainties related to sketched out ideas.
- Tips Think about validation rules Design alert messages
- 1 group present to the others
- Work through each of the items in the list and mark your site/system as either conforming or not conforming Guidelines are context specific. If you feel that a guideline does not apply to your site, it's OK to ignore it. These guidelines are purposefully expressed as positive statements, so that when you feed the results back to the design team you can identify some strengths of the design before you launch into the problems
- Use Guidelines & your experience
- You have an example in the note
- This scales all values from 0 to 4
- URL = User Requirements with Lego
- Deming
- What’s your achievements ? Move achieved post its on the right
- useit.com (Jakob Nielsen)