USERINTERFACE DESIGN Fjodor van Slooten
TODAY USERINTERFACE DESIGN -Introduction -Interaction design -Prototyping techniques -Practice Collaborative Design Challenge: Paper prototyping Heuristic evaluation vanslooten.com/uidessim 2
SCHEDULE > Date Subjects 1 May 2th Create a paper prototype of a Userinterface and perform a heuristic evaluation 2 May 9th Build an interactive prototype (with Axure) 1 3 May 30th Build an interactive prototype (with Axure) 2 4 June 13th Integrate the prototype into a website and conduct online usability tests 5/1/2018 3
GOAL - Familiarize with a design process with alternating steps of prototyping and evaluation of usability - Get experience with prototyping techniques like story boards, paper prototyping, building interactive prototypes/demos, interactive simulation - Learn to apply guidelines on interaction design - Gain insight in cohesion between design of user-friendly interaction and the physical attributes of interface components 4
Userinterface design & simulation is the design of websites, apps, computers, appliances, machines and communication devices with the focus on the user s experience and interaction User analysis Information architecture Physical & graphical interface design 5
Userinterface design & simulation is the process of building a prototype which (according to our goal*) matches the end-product we are designing aimed at usability testing Set a goal: how close do we match the end-product? * ultimate goal would be to match as close as possible improve Build a prototype Test Evaluate 6
Contact (potential) users & co-design!? digital model/prototype 7
BASIC PRINCIPLES [graphic design] Less is more [keep it simple] Don t make me think The best interface is no interface 5/1/2018 8
DESIGN PRINCIPLES See what functions are available & what the system is currently doing [Status] Consistent in design features and standard ways of working Familiar for intended audience & provide metaphors Design things so it is clear what they are for [Affordance] Easy to move around [Navigation] Allow user to take control Feedback on all actions Benyon: Systems should be learnable, effective and accommodating More: read chapter 4.5 9
USABILITY - Effectiveness - Efficiency - Satisfaction > Task completion, error recovery > Task completion time, number of steps > Stress? Willingness to buy Dependent on user, context and task/goal 10
DESIGN PHASES ANALYSIS Goal PACT analysis (People, Activities, Contexts, Technologies) Users needs and requirements (PvE) Competitor analysis Functions analysis Function allocation PRODUCT (INTERFACE) DESIGN Develop concepts Choose a concept Detail design EVALUATE PRODUCT (usability test) Plan, set-up & carry out tests Analysis of results, draw conclusions Re-design Task analysis Scenario { Human Factors, module 4 } 5/1/2018 11
UI DESIGN In-context: User, Userinterface, Product & it s environment UI is most visible part of a product! Usability is dependent on context, user and task Design activity Analyze product use Low-fi prototype Hi-fi prototype Evaluation with users Use Storyboard (1) Paper prototype (2) Functioning digital UI prototype or mock-up (3) Full usability test 12
Examples of paper prototyping 13
INFORMAL TESTING What s that?: Go guerrilla! What shall we test? Where will we test? With whom will we test? and, of course, How will we test? testing plan: write short intro state goals profile your desired test subject outline your testing methodology define tasks write test script design a post-test survey + quick & easy + inexpensive + instant improve design - recruit subjects - familiarity with subject: bias - not easy to apply statistics/ scientific results { MOD7: Iterative design & Co-design } 5/1/2018 MOD8 Virtual Product Development - USERINTERFACE DESIGN "The Art of Guerrilla Usability Testing" 14
INFORMAL TESTING Always start with open-ended, non-leading questions like: What do you make of this? What would you do here? What are you currently thinking? Is that what you expected [to happen]? How would you do [that]? That was confusing? Each 10-15 min. session includes: Intro and explanation Questions about your participant 2 or 3 tasks for the participant "The Art of Guerrilla Usability Testing" 15
HEURISTIC EVALUATION Nielsen's heuristics = usability review by an expert Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Evaluation-forms are available during 5/1/2018the workshop Maak systeemstatus zichtbaar Zorg voor relatie tussen UI en echte wereld Zorg voor duidelijkheid en controle Wees consistent Voorkom fouten Zorg voor herkenning i.p.v. herinnering Bied flexibiliteit en efficiëntie Houd het simpel Los fouten op Bied ondersteuning Full details: Wiki Nederlands artikel: Jakob Nielsen's heuristieken, maar dan voor mensen 16
MORE INFO Recommended reading and slides @ vanslooten.com/uidessim Slides and materials of Module 4, Human Factors (Ergonomie); get them from blackboard Including book: Designing Interactive Systems - David Benyon, chapter 1-4 17
PRACTICE 1st hour: How? What? product USER External functions Identify product functions Can do Behaves Looks Is UI Internal functions Consists of Working principles Specs What it does, stores, 18
PRACTICE 2nd hour: DESIGN - Improve/extend UI Sketch: e.g. add product impression, context, views (if necessary) Turn it into a paper prototype - Add details about interaction: Sketch Userinterface and make basic navigation possible: e.g. have parts appear, pop-up/out, (cut tabs & dialogs) TEST - Does not have to be complete, but should make it possible to perform (simplified) tasks according to test plan - Make a test plan - Perform two tests with fellow-students: - Observe and take notes: ask participant to think out loud - Student-participant: execute heuristic evaluation, write-down score for each of Nielsen's heuristics - Do NOT use members of your own project-group! - Informal test: perform two tests with random participants (hallway, canteen), just test, no heuristic evaluation FINALIZE: - Summarize briefly: what did you learn, specs for re-design (iterate!) 19
DO [THIS WEEK] Work on analysis & design phase E.g. describe goal, users, scenarios (PACT/PACA), functional analysis Develop (early) prototype (eg. storyboards, paper prototype) Design different concepts Next week: Find a competitive product How can this product be improved? Sketch! Or: come up with an alternative use/other market/other price How will this impact UI-design? Sketch! Next week s presentation: More on interaction design Introduction to rapid prototyping tools & Workshop Axure, Recommended to read (again): Designing Interactive Systems - David Benyon chapter 1-4 20
QUESTIONS? 21