Prototype-UX-UI - Tran Thi Que Nguyet

Nội dung text: Prototype-UX-UI - Tran Thi Que Nguyet

1. PROTOTYPE – UX – UI Lecturer. Tran Thi Que Nguyet ttqnguyet@hcmut.edu.vn 1
2. Steps ● Hypothesis statement ● Test method ● Test metric & criteria Example: ScotchFinder startup (1) We believe that people will be happy to share their scotch with others (2) We will test this by interviewing 100 people outside of a liquor store (3) We are right if more than 70% say that they like this idea 3
3. Test Card Name of test Hypothesis What assumption will you focus on? Test How will you test your hypothesis? Metric How will you measure the results? Criteria How will you know if your hypothesis is correct? 5
4. Minimum Viable Product ● “A minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.” (Eric Ries) ● Then, we put them in front of the people for whom we are trying to create value ● Their responses will tell us if we are on the right track è FAST and CHEAP way to REDUCE our RISK 7
5. Agile Manifesto ● Agile is a set of values and principles that guide how you should conduct innovation (from 2001) ● Bring four values ○ Individuals and interactions ○ Customer collaboration ○ Responding to change ○ Working versions of products 9
6. Prototyping 13
7. ● Brainstorming ● Generating potential solutions ○ Storyboarding ○ Sketching ○ Wireframe ○ Prototype ○ Mockup ○ Information architecture and navigation ● User testing ● Tools: Balsamiq, Invision, Figma, Adobe, etc. ● Building on feedback - Critique 15
8. Storyboard ● What do you need? Paper, Pens, A bit of glue, Some post-its, Print-outs of UI- elements (+ scissors) ● Online Tools: ○ ○ ○ Google sheets, draw.io ○ Video makers ● A process of time and interaction ● Prerequisites: personas, scenarios, the scope ● Elements: images, transitions, effects, voiceover, soundtrack 17
9. ● A wireframe is a schematic or blueprint that is useful for helping you, your programmers and designers think and communicate about the Wireframe structure of the software or website you're building. ● Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added. ● Some tools as Sketch, Adobe XD, Axure, Visio, balsamiq, figma, moqups, draw.io Comparisions designers-in-2017-189e6a594fda wireframing-tools/ 21
10. Information Architecture & Navigation ● IA defines site content and functionality, while a website’s navigation is a collection of user interface components and patterns that helps visitors find information and functionality. ● 8 principles ○ The principle of objects: Content should be treated as a living, breathing thing. It has lifecycles, behaviors, and attributes. ○ The principle of choices: Less is more. Keep the number of choices to a minimum. ○ The principle of disclosure: Show a preview of information that will help users understand what kind of information is hidden if they dig deeper. ○ The principle of exemplars: Show examples of content when describing the content of the categories. 25
11. Value of IA ● Value for the user ■ 4 main types of needs ■ Known-item seeking: Users will come to the website to search for something desirable and known. ■ Exploratory seeking: Users will come to the website looking for inspiration. They’re looking for something desirable but not sure what exactly. ■ Exhaustive research: Users are in a process of an extensive research. They want to find as much information as possible. ■ Re-finding: A user needs a desired items again and are trying to find it. 27
12. Information Architecture ● Key processes q Define the company goals q Define the user’s goals q Analyze competitors q Define content q Steps q Step 1: Group and label the content q Step 2: Define navigation and create site map q Step 3: User testing 29
13. Navigation ● Some examples of navigation components: 1) utility navigation; 2) global navigation; 3) breadcrumb trail; 4) local navigation; 5) related links (in this case, articles and blog posts); 6) fat footer. (www.sba.gov) 31
14. Sitemaps ● Application maps/site maps ○ A document describes how the components you've designed are incorporated in the existing system. ○ Demonstrates the information hierarchy architecture of the entire design, surfaces critical pathways through which the user can navigate ○ Offers a comprehensive view of all the work that needs to be implemented. ● Interaction design ○ Designers may be expected to create documentation regarding how the user interface should be built and interaction between modules 33
15. User Testing ● To help understand how people are using your designs ● From third parties ○ A quantitative measurement ○ Tell you what users are doing with your released software ○ For example: Google analytics, Microsoft's the Software Quality Metrics (SQM) ● A/B testing 35
16. Similarity ● The principle of similarity states that when things appear to be similar to each other, we group them together. And we also tend to think they have the same function. ● The squares here are all equally spaced and the same size, but we automatically group them by color, even though there's no rhyme or reason to their placement. 39
17. Common region ● The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together. ● A good Common Region example would be the card UI pattern; a well defined rectangular space with different bits of information presented as one. Banners and tables are good examples as well. 41
18. Closure ● The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern. ● When you look at the image above you most likely see a zebra even though the image is just a collection of black shapes. Your mind fills in the missing information to create a recognizable pattern based on your experience. 45
19. Symmetry ● Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order. ● It’s good to use Symmetry for portfolios, galleries, product displays, listings, navigation, banners, and any content-heavy page. 49
20. EXERCISES ● Install Omnigraffle or Balsamiq ● Adding stencils ● Create sitemap ● Take screenshots of images and "props" ● Create concept flow diagram (optional) ● Build page wireframes ● Walkthrough all the tasks using the wireframes ● Instagram – Pinterest 51
21. Accessibility ● 4 levels: perceivable, operable, understandable, and robust ● Make it easier for users to see and hear content ● Foreground text below 18pt should have a minimum colour contrast ratio of 4.5:1 ● Users should be able to resize the text in their display. ● Do not differentiate significant (non-decorative) icons based on colour ● If a keyboard is an input device to the system, enable keyboard access to the entire system. ● Be patient accepting input from users ● Help users avoid and correct mistakes. ● 55