Principles of UX Engineering
•Download as PPTX, PDF•
0 likes•43 views
This document discusses UX engineering and principles for designing applications for people. It explains that the structural, functional, and visual design are important to consider. The structural design is how an application is organized based on user goals and information architecture. The functional design is how an application behaves, prioritizing recognition over recall, providing feedback, and ensuring controls are easy to use. The visual design considers consistency, similarity and contrast between elements, proximity of related items, and alignment. An iterative design process using UX tools and principles can help solve users' problems through the application's design.
More Related Content
What's hot
What's hot (20)
Similar to Principles of UX Engineering
Similar to Principles of UX Engineering (20)
More from The Wisdom Daily
More from The Wisdom Daily (20)
Recently uploaded
Recently uploaded (20)
Principles of UX Engineering
- 2. How do people perceive design? Behavioral Function Understandability Usability Physical Feel Reflective Message Culture Meaning Image Visceral Look & Feel & ... Gestalt First impression Gut reactions
- 3. How to design for people?
- 9. Whose problem are we solving?
- 10. But his...
- 12. How do we solve the problem?
- 16. What Tools & Principles do you need?
- 17. [Alan Cooper, About Face 3.0]
- 19. UX Tools & Principles Structural Functional Visual
- 20. The structural design is how your application is organised.
- 21. User Content Goals IA Information Architecture IA organise content based on your users and their goals
- 26. UX Tools & Principles Structural Functional Visual
- 27. The Functional Design is how your application behaves.
- 28. Recognition vs. Recall People are better at recognizing things they have previously experienced than they are at recalling those things from memory. Choose recognition over recall!
- 30. Feedback What is happening, what has happened?
- 31. Feedback
- 32. Affordance The control suggests what how to operate it. Affordance The control suggests how to operate it.
- 33. Tolerance Prevent errors, help recovery.
- 34. UX Tools & Principles Structural Functional Visual
- 35. The Visual Design is how your application looks and feels.
- 36. Consistency (also Cohesiveness) Things that look alike should behave alike (be consistent). Consistency does NOT mean: everything looks the same
- 37. Consistency
- 38. Similarity & Contrast …if things are different make them look different. Really different
- 40. Proximity Objects that are close to each other form a group.
- 41. Proximity
- 42. Alignment Creates a visual connection between related elements
- 43. Alignment
- 44. Alignment
- 45. Bringing it (all) together... Simplicity Details on Demand Feedback Affordance Tolerance Contrast Proximity
- 52. FACT A piece of information “Ten years ago they didn't have email” “They have email” “They have whatsapp” “They have smartphones” “Rafting is dangerous”
- 53. CHALLENGE A problem defined through action. “how might we” “How might we use email to help them get organized” “How might we take the river to where they are” “How might we make rafting safe”
- 54. IDEA Something that makes something “Google Wave for outdoor activities” “A virtual rafting experience” “Make foam stones”
Editor's Notes
- 3 runtime compiler that all cost energy
- engineering process boiling it down to a great solution
- Who are we designing for? What problems are we solving? What are we focussing on? we have different methods: quantity vs quality.
- - memory, attention - e.g. post completion error… scanner and printers vs atms
- Learning, behavior, banner blindness, issue with search knowledge boxes
- How are distilling our observations into findings? What does matter to our problem
- WHY: - Understanding (+exploring) - Sharing with the team - Validating (over time)
- WHAT: - keeping track of values, behavior, change - generating a mission statement Create prototype people, ie: “Persona”
- - Exploring problem spaces -
- WHAT - Fast ideation - Stating solutions - create a common understanding - generate group alignment how is the box on the shelf used?
- bringing ideas together
- basic UX knowledge to come up with a first draft or prototype to itereate on….. helping you to base decissions on UX and/or UI questions on some expert knowledge…. BUT: only a small subset of principles that we show here (randomly selected by me…)
- … after we heared Johan explaing what UX is and is not, Robert explained us the UX lifecyle… taking it from there I would like to introduce some tools and principles, that come in handy while developing your Prototypes or shaping your product
- Implementation model == eng thinking - software architecture (database model, data types, classes) (free space on harddrive, so that in can be overwritten someday) Mental model == how the user thinks the system should behave to serve his goal (deleting a file = putting it in the trash) Representation model == how the UI looks and feels (drag and drop a file into the trashcan)
- - Iterative process - Collaborative process
- Build up an architecture for your application where am I going to show which information? How are the different screens structured? Primary questions: Who are my users? What do they want to achieve using your application / what are the goals? - What are the primary goals, what are secondary goals? - What information does the user need to see to achieve the primary goal? - What information is imperative to achieve this goal? - What information is needed to achieve secondary for follow up goals?
- simplest way to come up with an IA low-fi, low-tech - no tools needed, everybody can participate after brainstorming order structure content, features and information into sections, where they do make sense to help the user achieve the identified goals
- translate it into a first UI => raw pencil on paper is more than enough!!!! devide screen into ares for information “where do I see which information”
- Pro Tip Squint your eyes blurred view
- Pro Tip Squint your eyes identify regions / sections
- It’s easier to click and choose from a variety of options than to write out those same things from memory. A classic move from using recall memory to recognition memory in user interface design was when modern GUIs (Graphical User Interfaces) slowly began replacing the older command-line interfaces known from DOS or the UNIX prompt. The effort associated with learning commands in the command-line interface made computers difficult to use. By presenting commands in menus in modern GUIs, the recalling commands from memory became obsolete and simplified the ease of use of computers. => never the less you need expert features for quick acess to these features, like copy and paste AND: Know your users….. for some entering commands is appropriate!!!! this is also why: understanding a foreing language is easier than talking
- e.g. you want to fly friday in 2 weeks
- - Feedback (what's happening) - Visibility of System Status (where am I) Chrome: After zooming in our out with keyboard commands, the current zoom level with the controls is briefly displayed
- Youtube: When video is playing a play icon is added to the title text
- this only helps people who can read and who understand englisch
- errors are human!!! undo, redo, abort, cancel, reset…. spell checker / auto correct...
- phonebook does not look and behave like a calendar! Avoid uniformity. Make objects consistent with their behavior. Make objects that act differently look different. ...Lack of consistency in a UX design leads to added “cognitive load” for the user and breaks the “transparent to task” effect. An inconsistent UX requires the user to repeatedly allocate thinking to how to use the interface because there are many more variations of UX patterns. Consistency (visual and behavioral) in a UX means that the user can learn the controls and then employ them without much active thinking about them, and can instead concentrate on the work itself. still they all look cohesive / feel the same.
- all looks alike, even though the concrete input methods are totally different - align screens by drag and drop - set timezone using a map - set your date and time via clock and calendar but they all feel the same - back - navigation - search - ...
- all items for a unit (same font and size) but some stand in contrast to the rest by being bold (more important) one even is red (most important) => the label I chose to see currently
- 4 Dots forming a group
- you can only tell if in context… even though I know the issue I sill confuse it every time!!!
- all apps are aligned. no app looks more important than the others it looks homogeneous, all belongs together, clean and easy to look at BUT: nav elements on bottom are not aligned… they appear to be different than the rest - YES, they are! Do this intentionally!!!!
- Proximity done right!
- Simplicity - just a textfield… Details on Demand - little info button Feedback - instantly as you type (color and text changes) Affordance - just a textfield (pw-field) Tolerance - easy undo, easy feedback when I do something right Similarity & contrast - different stages are easy to seperate from each other Proximity - feedback and textfield form a unit