Lecture 5 wireframes_and_ux_principles
- 1. Module: Application Engineering and Design Topic 5: Wireframes and User Experience (UX) Principles
- 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. Low fidelity wireframe example 3
- 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. 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. 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. Transfer of initial design detail Here, the low fidelity wireframe details transcend into the flow chart / screen map: B4004A L1 7
- 8. High fidelity wireframe example Source: http://developer.android.com/training/design-navigation/ B4004A L1 8 wireframing.html
- 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. 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. 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. 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. 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. 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. 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. Wireframes Design Tool Download free http://www.justinmind.com/free B4004A L1 16
- 17. Wireframe Design Tool Justinmind Protyper B4004A L1 17
- 18. Wireframe Design Tool Justinmind Prototyper Interface B4004A L1 18
- 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. … next, moving on to User Experience (UX) … B4004A L1 20
- 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. The User Who is the user? • a child? – can they read? • an adult? – a business user; – a customer; – a researcher; B4004A L1 22
- 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. 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. 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. Law of Proximity B4004A L1 26
- 27. Law of Similarity B4004A L1 27
- 28. Law of Closure B4004A L1 28
- 29. Law of Symmetry B4004A L1 29
- 30. Gestalt principles B4004A L1 30
- 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. Useful UX Principles Use known and familiar icons B4004A L1 32
- 33. Useful UX Principles An image is sometimes worth 1,000 words: B4004A L1 33
- 34. Useful UX Principles Above the Fold B4004A L1 34
- 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. 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. End of presentation © Pearson College 2013
Editor's Notes
- #14: There are free tools, but not as good or effective. There are a lot of Storyboarding Tools for IOS (Apple), but fewer for Android.