Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Module: Application Engineering 
and Design 
Topic 5: Wireframes and User 
Experience (UX) Principles
Key topics / learning outcomes 
of this lecture 
• Low fidelity wireframes 
• High fidelity wireframes 
• Traditional Stor...
Low fidelity wireframe example 
3
Low fidelity wireframes – pro’s 
• quick; 
• low cost; 
• easily amended; 
• client/employer may visualise the design from...
Low fidelity wireframes – con’s 
• no clear instructions for front-end developer 
to build the User Interface(UI); 
• back...
Flow Chart / Screen Map 
Creating a flow chart / screen map from a low fidelity wireframe can then be used as 
the basis f...
Transfer of initial design detail 
Here, the low fidelity wireframe details transcend into 
the flow chart / screen map: 
...
High fidelity wireframe example 
Source: http://developer.android.com/training/design-navigation/ 
B4004A L1 8 
wireframin...
High fidelity wireframes - pro’s 
• Very detailed; 
• User Interface may be built rapidly from the 
detail in the high fid...
High fidelity wireframes - con’s 
• Time consuming; 
• Expensive for business: 
– time take to achieve the end result; 
– ...
High Fidelity Wireframe 
Some of the detail expected within a high fidelity wireframe: 
• screen size/sizes outlined; 
• s...
Traditional Storyboards 
• Visual storyboards are a good basis for preparing a 
video 
There are online tools available to...
Technical Storyboard Tools 
This one has good 
reviews but is not 
free 
https://play.google.com/store/apps/details?id=com...
Technical Storyboard Tools – pro’s 
• Storyboards are good for apps with a small to medium 
number of screens and relative...
Technical Storyboard Tools – con’s 
• Lots of views and lots of cross-navigation 
between screens and the Storyboard view ...
Wireframes Design Tool 
Download 
free 
http://www.justinmind.com/free 
B4004A L1 16
Wireframe Design Tool 
Justinmind Protyper 
B4004A L1 17
Wireframe Design Tool 
Justinmind Prototyper Interface 
B4004A L1 18
Summary of wireframes design 
approach 
• Determine the time in hours available; 
• Decide on the app concept; 
• Draw low...
… next, moving on to User Experience (UX) … 
B4004A L1 20
User Experience (UX) 
What is it? 
• visually appealing design; 
• a design that the user can easily navigate; 
• a user c...
The User 
Who is the user? 
• a child? 
– can they read? 
• an adult? 
– a business user; 
– a customer; 
– a researcher; ...
Norman – the Design of Everyday Things 
“When objects appear to malfunction, it is not the fault of the user but rather 
t...
10 Usability Heuristics for User 
Interface Design – Jakob Nielsen 
1. Visibility of system status; 
2. Match between syst...
Gestalt principles 
Laws of grouping 
• Law of Proximity 
• Law of Similarity 
• Law of Closure 
• Law of Symmetry 
http:/...
Law of Proximity 
B4004A L1 26
Law of Similarity 
B4004A L1 27
Law of Closure 
B4004A L1 28
Law of Symmetry 
B4004A L1 29
Gestalt principles 
B4004A L1 30
Useful Usability Principles 
• Colours: 
– blue is often used for large screen areas as the eye 
sees blue in a more relax...
Useful UX Principles 
Use known and familiar icons 
B4004A L1 32
Useful UX Principles 
An image is sometimes worth 1,000 words: 
B4004A L1 33
Useful UX Principles 
Above the Fold 
B4004A L1 34
… next 
Topic 5 Seminar 
Learning the wireframes design software 
http://www.justinmind.com/free 
Work in groups 
Topic 5 ...
Essential work for next week 
• Please consult the OLE for details of: 
– Essential readings* 
– Seminar/workshop preparat...
End of presentation 
© Pearson College 2013
Lecture 5 wireframes_and_ux_principles
Upcoming SlideShare
Loading in …5
×

Lecture 5 wireframes_and_ux_principles

297 views

Published on

Topic 5 Lecture 5

Published in: Education
  • Be the first to comment

  • Be the first to like this

Lecture 5 wireframes_and_ux_principles

  1. 1. Module: Application Engineering and Design Topic 5: Wireframes and User Experience (UX) Principles
  2. 2. Key topics / learning outcomes of this lecture • Low fidelity wireframes • High fidelity wireframes • Traditional Storyboards • Technical Storyboard Tools • User Experience Principles (UX) 2
  3. 3. Low fidelity wireframe example 3
  4. 4. Low fidelity wireframes – pro’s • quick; • low cost; • easily amended; • client/employer may visualise the design from the drawings; • identify errors in design at early stage; • good material for basis of high fidelity wireframe design/storyboarding. B4004A L1 4
  5. 5. Low fidelity wireframes – con’s • no clear instructions for front-end developer to build the User Interface(UI); • back-end developer may not interpret the front-end development design; • client may require many changes to the design once it is built; – design changes often ‘cascade’, ie change the colour or function of one button and this may affect the design in other areas. B4004A L1 5
  6. 6. Flow Chart / Screen Map Creating a flow chart / screen map from a low fidelity wireframe can then be used as the basis for the high fidelity wireframe. B4004A L1 6
  7. 7. Transfer of initial design detail Here, the low fidelity wireframe details transcend into the flow chart / screen map: B4004A L1 7
  8. 8. High fidelity wireframe example Source: http://developer.android.com/training/design-navigation/ B4004A L1 8 wireframing.html
  9. 9. High fidelity wireframes - pro’s • Very detailed; • User Interface may be built rapidly from the detail in the high fidelity wireframe; • Changes to design are less likely to be requested; • Client and design team all have a clear indication of the end design and its usability • Ability to carry out a ‘cognitive walk through’ of the design. B4004A L1 9
  10. 10. High fidelity wireframes - con’s • Time consuming; • Expensive for business: – time take to achieve the end result; – people hours required to achieve the end result; • Missed opportunity: – the market has moved on in the time it has taken to build the high fidelity wireframes; – rapid application development is more suitable to today’s fast moving market due to: • new device releases; • technology advances; B4004A L1 10
  11. 11. High Fidelity Wireframe Some of the detail expected within a high fidelity wireframe: • screen size/sizes outlined; • screen resolution/resolutions provided; • layout and content; • headings and titles; • menu and navigation; • font type, colour, size; • colour defined for each element (usually in hexadecimal, or ARGB); • content type, ie images, video, interactive; • image placement; • components, ie buttons, their appearance, their actions; • navigational flow of the application; B4004A L1 11
  12. 12. Traditional Storyboards • Visual storyboards are a good basis for preparing a video There are online tools available to achieve this type of storyboarding. B4004A L1 12
  13. 13. Technical Storyboard Tools This one has good reviews but is not free https://play.google.com/store/apps/details?id=com.brakefield.storyboard&hl=en_GB B4004A L1 13
  14. 14. Technical Storyboard Tools – pro’s • Storyboards are good for apps with a small to medium number of screens and relatively straightforward navigation between views.; • For large apps design, split up into multiple storyboard files; • Storyboards assist with User Interface (UI) implementation; • Good for a small sized app. B4004A L1 14
  15. 15. Technical Storyboard Tools – con’s • Lots of views and lots of cross-navigation between screens and the Storyboard view gets confusing; • For a large project with multiple developers storyboards are not ideal, unless they can be split. B4004A L1 15
  16. 16. Wireframes Design Tool Download free http://www.justinmind.com/free B4004A L1 16
  17. 17. Wireframe Design Tool Justinmind Protyper B4004A L1 17
  18. 18. Wireframe Design Tool Justinmind Prototyper Interface B4004A L1 18
  19. 19. Summary of wireframes design approach • Determine the time in hours available; • Decide on the app concept; • Draw low fidelity wireframes; • Create a flow chart; • Identify wireframe design tools to use: – Microsoft Visio is good for flowchart design; Powerpoint has flowchart design tools; – Justinmind is free for app wireframe design; • Ability then to create a ‘high fidelity’ wireframe: – time available will determine the level of detail; – amount of content will also determine the level of detail. B4004A L1 19
  20. 20. … next, moving on to User Experience (UX) … B4004A L1 20
  21. 21. User Experience (UX) What is it? • visually appealing design; • a design that the user can easily navigate; • a user can easily reach their goal; • more than one way of achieving objective; • intuitive; • appeasing the psychology of the user; • sometimes known as ‘usability’. B4004A L1 21
  22. 22. The User Who is the user? • a child? – can they read? • an adult? – a business user; – a customer; – a researcher; B4004A L1 22
  23. 23. Norman – the Design of Everyday Things “When objects appear to malfunction, it is not the fault of the user but rather the lack of intuitive guidance that should be present in the design.” B4004A L1 23
  24. 24. 10 Usability Heuristics for User Interface Design – Jakob Nielsen 1. Visibility of system status; 2. Match between system and the real world; 3. User control and freedom; 4. Consistency and standards; 5. Error prevention; 6. Recognition rather than recall; 7. Flexibility and efficiency of use; 8. Aesthetic and minimalist design; 9. Help users recognise, diagnose and recover from errors; 10. Help and Documentation. B4004A L1 24
  25. 25. Gestalt principles Laws of grouping • Law of Proximity • Law of Similarity • Law of Closure • Law of Symmetry http://en.wikipedia.org/wiki/Gestalt_psychology Law of Symmetry B4004A L1 25
  26. 26. Law of Proximity B4004A L1 26
  27. 27. Law of Similarity B4004A L1 27
  28. 28. Law of Closure B4004A L1 28
  29. 29. Law of Symmetry B4004A L1 29
  30. 30. Gestalt principles B4004A L1 30
  31. 31. Useful Usability Principles • Colours: – blue is often used for large screen areas as the eye sees blue in a more relaxed way; – red to attract attention; – green for ‘go’ • ie purchase button at checkout B4004A L1 31
  32. 32. Useful UX Principles Use known and familiar icons B4004A L1 32
  33. 33. Useful UX Principles An image is sometimes worth 1,000 words: B4004A L1 33
  34. 34. Useful UX Principles Above the Fold B4004A L1 34
  35. 35. … next Topic 5 Seminar Learning the wireframes design software http://www.justinmind.com/free Work in groups Topic 5 Workshop Work in group and brainstorm app ideas Create low fidelity wireframes of an app B4004A L1 35
  36. 36. Essential work for next week • Please consult the OLE for details of: – Essential readings* – Seminar/workshop preparation work* – Recommended further readings – Any additional learning * Essential readings and preparation work must always be completed in time for the next session 36
  37. 37. End of presentation © Pearson College 2013

×