usability workshop at lillebaelt academy
DESCRIPTION
Usability workshop held by Daniel Gore on 25.11.13. at Lillebealt Academy, Odense, DenmarkTRANSCRIPT
![Page 1: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/1.jpg)
Usability Workshop25.11.2013.!EAL, DSR !Daniel Gore
![Page 2: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/2.jpg)
What is Usability?
![Page 3: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/3.jpg)
"Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” Jakob Nielsen
Definition
![Page 4: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/4.jpg)
• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
![Page 5: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/5.jpg)
• Definition: Utility = whether it provides the features you need.
• Definition: Usability = how easy & pleasant these features are to use.
• Definition: Useful = usability + utility
![Page 6: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/6.jpg)
• Maps, info graphics
• Special Books!
• Houses, Factories, Malls!
• Softwares, websites, apps
![Page 7: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/7.jpg)
![Page 8: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/8.jpg)
![Page 9: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/9.jpg)
![Page 10: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/10.jpg)
• Satisfied users are happier customers
• Increasing productivity
• Increasing profits
• 10% of the design budget = 2x sales increase
Why is usability important?
![Page 11: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/11.jpg)
• "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. Jakob Nielsen
User Experience
![Page 12: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/12.jpg)
• Information architecture (IA) is the art and science of organising and labeling data including: websites, intranets, online communities, software, books and other mediums of information, to develop usability and structural aesthetics. Wikipedia
Information Architecture
![Page 13: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/13.jpg)
Usability in the development process
![Page 14: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/14.jpg)
Content (IA)
Usability
Ads
SEO
![Page 15: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/15.jpg)
![Page 16: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/16.jpg)
• we can test our assumptions
• we can measure our products
• we can iterate on our products
Usability in the development process
![Page 17: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/17.jpg)
Usability Principles
![Page 18: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/18.jpg)
The 10 most general principles for interaction design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.We can measure our products
Heuristics for heuristic evaluation developed by Jacob Nielsen and Rolf Molich in 1990
Nielsen refined it based on a factor analysis of 249 usability problems in 1994
![Page 19: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/19.jpg)
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
1. Visibility of system status
![Page 20: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/20.jpg)
![Page 21: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/21.jpg)
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
2. Match between system and the real world
![Page 22: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/22.jpg)
![Page 23: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/23.jpg)
![Page 24: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/24.jpg)
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
3. User control and freedom !
![Page 25: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/25.jpg)
![Page 26: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/26.jpg)
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
4. Consistency and standards !
!
![Page 27: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/27.jpg)
![Page 28: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/28.jpg)
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
5. Error prevention
![Page 29: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/29.jpg)
![Page 30: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/30.jpg)
Minimise the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
6. Recognition rather than recall
![Page 31: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/31.jpg)
![Page 32: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/32.jpg)
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
7. Flexibility and efficiency of use !
![Page 33: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/33.jpg)
![Page 34: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/34.jpg)
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
8. Aesthetic and minimalist design !
![Page 35: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/35.jpg)
![Page 36: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/36.jpg)
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution
9. Help users recognize, diagnose, and recover from errors !
![Page 37: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/37.jpg)
![Page 38: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/38.jpg)
![Page 39: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/39.jpg)
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
10. Help and documentation !
!
![Page 40: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/40.jpg)
![Page 41: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/41.jpg)
Usability for websites
![Page 42: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/42.jpg)
Predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.
The bigger an object and the closer it is to us, the easier it is to move to.
Fitt's law !
!
![Page 43: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/43.jpg)
![Page 44: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/44.jpg)
![Page 45: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/45.jpg)
The time it takes for a person to make a decision as a result of the possible choices he or she hasThe bigger an object and the closer it is to us, the easier it is to move to.
The more options, the more difficult to choose
Hick's law !
!
![Page 46: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/46.jpg)
![Page 47: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/47.jpg)
Elements with similar functions should be grouped physically and visually.
Similarity !
!
![Page 48: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/48.jpg)
![Page 49: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/49.jpg)
Use the logo as a link for navigating to the main page.
Navigation !
!
![Page 50: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/50.jpg)
The user should always know where is he on the website
Navigation !
!
![Page 51: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/51.jpg)
Links should be visually different and they should speak for themselves
Navigation !
!
![Page 52: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/52.jpg)
The text should be always readable
Try to highlight important informations for quicker readers
Contrast, whitespace
Readability !
!
![Page 53: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/53.jpg)
![Page 54: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/54.jpg)
Recommended reading !
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
![Page 55: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/55.jpg)
Usability for mobile
![Page 56: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/56.jpg)
Different place and way of usage
Smaller screen
Different screen sizes
Differences !
!
![Page 57: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/57.jpg)
![Page 58: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/58.jpg)
![Page 59: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/59.jpg)
Searching for information (Google Maps)
Social media (Facebook)
Work (Email)
Communication (Messaging)
Spending free time (Angry Birds)
What are they doing? !
!
![Page 60: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/60.jpg)
Mobile First / Mobile last !
!
![Page 61: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/61.jpg)
Concentrate on the content
Decrease navigation elements
Content first !
!
![Page 62: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/62.jpg)
![Page 63: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/63.jpg)
Bigger navigation elements (finger size)
Bigger whitespace between elements
No hover state
Instead of scroll, swipe
No physical feedback, visualise feedbacks
Mobile usability
![Page 64: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/64.jpg)
Hotspots
![Page 65: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/65.jpg)
Mobile interfaces
![Page 66: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/66.jpg)
Dashboard
![Page 67: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/67.jpg)
Hamburgermenu
![Page 68: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/68.jpg)
Tabs
![Page 69: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/69.jpg)
Other approaches
![Page 70: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/70.jpg)
GPS
Camera
Sensors
Navigation
Environment
Use the device!
![Page 71: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/71.jpg)
One eye one thumb !
!
![Page 72: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/72.jpg)
Recommended reading !
http://www.lukew.com/resources/mobile_first.asp
![Page 73: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/73.jpg)
Information Architecture
![Page 74: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/74.jpg)
The structural design of shared information environments.
The art and science of organizing and labeling web sites, intranets, online communities, and software to support findability and usability.
The combination of organization, labeling, search and navigation systems within websites and intranets.
![Page 75: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/75.jpg)
![Page 76: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/76.jpg)
![Page 77: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/77.jpg)
• sequential!
• hierarchical!
• narrow and deep
• broad and shallow
• web or tag-based
Structuring information !
!
![Page 78: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/78.jpg)
1. 2. 3.
![Page 79: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/79.jpg)
![Page 80: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/80.jpg)
![Page 81: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/81.jpg)
![Page 82: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/82.jpg)
![Page 83: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/83.jpg)
![Page 84: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/84.jpg)
• Technique that helps us to organise information
• We can test our users
• Open, closed, hybrid
Card sorting !
!
![Page 85: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/85.jpg)
• Define sitemaps
• Structures and hierarchies
• Content categories
• Product categories
• On site
• what should be in one place
• Titles, names, tags
Card sorting is good for… !
![Page 86: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/86.jpg)
• UX sort http://www.uxsort.com/
• xSort http://www.xsortapp.com/
• Simple Card Sort http://www.simplecardsort.com/
Tools to use !
![Page 88: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/88.jpg)
• Displays the frequency that cards are grouped together.
![Page 89: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/89.jpg)
• Shows the clustering of groups in a tree view.
http://en.wikipedia.org/wiki/Cluster_analysis
![Page 90: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/90.jpg)
Recommended reading !
http://practical-ia.com/
![Page 91: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/91.jpg)
Prototyping
![Page 92: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/92.jpg)
• Define what do you want to test or present
• Choose your tool based on this
![Page 93: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/93.jpg)
![Page 94: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/94.jpg)
![Page 95: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/95.jpg)
Development Progress
!Cost ofchange
Prototype
Alpha version
![Page 97: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/97.jpg)
![Page 99: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/99.jpg)
• Framer.js http://www.framerjs.com/
• Bootstrap http://getbootstrap.com/
• Foundation http://foundation.zurb.com/
![Page 100: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/100.jpg)
Testing
![Page 101: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/101.jpg)
• Measuring analytics can answer the what?
• Usability research can answer for the why?
• Combine analytical data with the UX research for proper insights
Never stop asking questions !
![Page 102: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/102.jpg)
• Usability test
• Observation
• Field study
• Interview
• A/B or multivariate tests
• Eye tracking
Usability research types !
![Page 103: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/103.jpg)
• Existing website or app
• Paper prototype
• Wireframes or graphics
• Interactive prototypes
You can test on… !
![Page 104: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/104.jpg)
• Use real life tasks (Book a ticket, Find someone)
• Ask the participants to think loudly (“I think I should click here to …”)
• Start the test from a realistic environment (Google)
Usability research
![Page 105: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/105.jpg)
• People can tell you what they want
• User research is expensive
• People are rational
• They click on the red buttons more often
• You know what your users wants
Some misbeliefs about researches
![Page 106: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/106.jpg)
Some rules for usability researches
!
![Page 107: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/107.jpg)
Don’t ask leading questions
![Page 108: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/108.jpg)
Don’t ask if a feature would ever be used
![Page 109: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/109.jpg)
Don't ask open ended questions
![Page 110: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/110.jpg)
Stay neutral
![Page 111: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/111.jpg)
![Page 112: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/112.jpg)
A/B tests
![Page 113: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/113.jpg)
![Page 114: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/114.jpg)
Multivariate tests
![Page 116: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/116.jpg)
Measuring
![Page 117: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/117.jpg)
• Where are they coming from?
• What are they doing on my website?
• When and where are they leaving it?
You can get answers for these question by measuring you websites
![Page 118: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/118.jpg)
• Content: What should be on the main page?
• Structure: What kind of content should go into the main menu point?
• Do we need detailed search options?
• Should we optimise our website for mobiles?
You can get answers for these question by measuring you websites
![Page 119: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/119.jpg)
• Analytics can tell you what are your users, visitors are doing but it cannot tell you why are they doing it.
Analytics
![Page 120: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/120.jpg)
![Page 121: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/121.jpg)
• Basic indicators
• Conversions
• Funnels
• Integrate in multiple marketing channels
Google Analytics
![Page 122: Usability Workshop at Lillebaelt Academy](https://reader033.vdocuments.mx/reader033/viewer/2022052821/55493faeb4c9050f4d8b4fea/html5/thumbnails/122.jpg)
http://www.advanced-web-metrics.com/
Recommended reading !