Elements of UX Design

6,276
-1

Published on

An Overview on the Process of creating User Experience from Research to Implementation.

Published in: Technology, Business, Design
1 Comment
29 Likes
Statistics
Notes
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,276
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
278
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide

Elements of UX Design

  1. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Memi Beltrame The UX Design Process Creating User Experience from Research to Implementation Liip techtalk, November 9th 2010
  2. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process User Experience Design Content Behaviour Form
  3. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Content Behaviour Form Information Architects Grafic Designers Interaction Designers
  4. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process No Design without Research
  5. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process No Design without Research Who? What? Why? How?
  6. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process UX Design follows the 5S Pattern
  7. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Abstract Concrete
  8. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Research Implementation
  9. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Strategy
  10. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Strategy Find out ● Context ● Purpose/Range ● Focus Group(s) ● Mission Statement
  11. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Scope
  12. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Scope Find out ● Personas ● Their Goals ● Their Motivation ● Their Usecases
  13. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas A Short Introduction
  14. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process A Persona is a representative of a certeain user group. Define Target Audience Analyze Users Group Users Form Persona Peter Sue Marc
  15. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas ● Are tangible ● Provide a common ground for conversation ● Help prioritize tasks in regard to business relevance
  16. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas ● Name them ● Give them a background ● Define their level of skills ● Define motivation & needs
  17. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process The Weiss familyJeff & Lize Kevin & friends Example: Swiss Winter Resort
  18. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process The Weiss familyJeff & Lize Kevin & friends Who are they? What are their needs? Example: Swiss Winter Resort
  19. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Example: Swiss Winter Resort The Weiss familyJeff & Lize Kevin & friends ● Middle class couple ● Jeff: Lawyer, Lize: Teacher ● Travel a Lot ● Like sports & nature ● Want to find out on their own what suits them most ● Student ● Very social snowboard nerd ● Good offers are crucial to him ● Likes adreanline kicks ● Depends on public transport ● Wants to get on the slopes as easily as possible ● Shoe-Shop owners with 2 kids ● Have been here before once ● Come by car ● Only during school holidays ● Want to be sure to get best offers to match their budget ● Need planning support
  20. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure
  21. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure Find out ● Workflows ● User Priorities: Tasks & Information
  22. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton
  23. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens
  24. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens Make Prototypes → Test → Iterate
  25. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Tests verify assumptions on ● Tasks ● Workflows ● Content
  26. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Define Patterns for Interaction and Design Principles
  27. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface
  28. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Design Layouts and Grafical Elements.
  29. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Implement Design and Interactions
  30. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Implement Design and Interactions Implement → Test → Iterate
  31. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Tests give feedback on ● Functionality ● Content ● Aesthetics
  32. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Recap
  33. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Mission, Focus Groups Personas, Tasks Workflows, Information Architecture Prototypes, Design Patterns Screens, Implementation
  34. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Any Questions?
  35. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Thank you!
  36. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Creative Commons Credits: By Steve Polyak http://www.flickr.com/photos/spolyak/1031569673/ By David – Studio 757 http://www.flickr.com/photos/studio757/4515640847/ By Sport Communities http://www.flickr.com/photos/sportcommunities/2200759639/
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×