20. Wantsome10 - w12s2 - Recap(joi, 25.05.2023).pptx

wantsome.ro Mai mult decât știai. UX/UI Design 25/05/2023 Week 12 Session 2 Leo Luția & Teona Șolescu

Agenda Today’s agenda - Recap 1. Sitemap 2. User flows 3. Wireframes

Sitemap wantsome.ro

Sitemap What is a sitemap? wantsome.ro

Sitemap What is a sitemap? ● A diagram that shows the entire content of website or app; ● It can be summarized, to only show the pages, or extended, where it also contains the sections of each page; ● Can be later on updated when the product grows, but it should cover the entire content of the product(all pages); ● It is linear, not cyclical, so it only displays each page once, even if it can be accessed from multiple points. (But it can go both horizontally and vertically) Important: A sitemap does not show the entire navigation of the product, just the main access points wantsome.ro

Sitemap Why do we need a sitemap? wantsome.ro

Sitemap Why do we need a sitemap? ● Helps everyone working on the project understand it’s complexity; ● Helps with the navigation - makes sure every page can be accessed from the home page; ● Helps us discover what the product needs to include before actually designing it; ● Helps us know how many screens we need to design/consider. wantsome.ro

Sitemap Tips & tricks ● You can color code it - either for sections or for different user access types; ● The numbering helps you keep track of how deep into the app the user is; ● Try to be organised, keep everything in the same line/column; ● Is based on the user flows, because there we can find new pages needed - so make sure you create them in order so you won’t need to revisit it when you finish the user flows. wantsome.ro

Sitemap Demo - Let’s try it out! wantsome.ro

User flows wantsome.ro

User flow What is an user flow? wantsome.ro

User flow What is an user flow? ● A diagram that shows the path of an user to complete a task; ● It takes in consideration all the nodes(actions) where an user can turn, exit or receive an error until they can achieve their task; ● Even though it can cover the entire application to create an full overview of the navigation, it usually focuses on specific tasks/areas; ● They are usually based on task flows(they don’t require decisional blocks); ● It can(must) contain cycles - this assures a smooth navigation without blockers. wantsome.ro

User flow Why do we need an user flow? wantsome.ro

User flow Why do we need an user flow? ● Because we consider the possible actions in each step, it helps us makes sure the user is free to navigate without getting stuck in our website/app; ● Helps us foresee any confirmation dialogs, such as popups; ● Segmenting it on tasks we are sure each task is achievable considering our requirements; ● It makes sure the main functionalities are designed as expected. wantsome.ro

User flow Tips & tricks ● Try to always have a legend that mentions what each color and shape represents - this will help you be consistent and will make it easier to anyone else read it smoothly. ● There are 4 standards elements, start & end, actions, decisions and arrows, but you can use more variations if needed, as long as you have a legend. ● Take your time and take it step by step, so you won’t miss any possible actions available. ● Keep it organised - try to follow an imaginary grid of lines and columns so you can visualise everything easily. wantsome.ro

User flow Demo - Let’s try it out! wantsome.ro

Wireframes wantsome.ro

Wireframes What are wireframes? ● Sketches that represent the rough content of an page; ● They can be drawn anywhere(digitally or not), and anyhow(lo-fi, hi-fi, with real content or not); ● Are made before the actual design, so they can be updated easily; ● More often than not, we use wireframes kits to helps us sketch fast, without focusing on the visual aspect; ● Screens are usually organised based on the level they have in the sitemap (levels go vertically, sublevels go in line with their parent); wantsome.ro

Wireframes Why do we need wireframes? ● Helps us ideate quickly; ● It’s easy make different variations and it helps us take decisions faster; ● We can test them before creating the final design; ● Helps us keep track of what we should work on when we “get lost” in details with the final design; ● Helps us organize the content without worrying about colors, sizes or spacing. wantsome.ro

Wireframes Demo - Let’s try it out! wantsome.ro

Ok, bye now! wantsome.ro