Wireframing

PV252 seminar

• Usability heuristics - recap 
• Crazy 8's
• User flows
• UI components
• Project: Ideation

Agenda

Activity

3 min

Turn as many of the blank circles as possible into recognizable objects

Design studio

https://kisk.phil.muni.cz/100metod/crazy-8s

• brainstorming technique
• multiple iterations
• influence within the team

Crazy 8's

https://kisk.phil.muni.cz/100metod/crazy-8s

• brainstorming technique
• 8 squares (8 ideas)
• 8 minutes

• share and vote
• share the best with the class

• other techniques: design studio, brainwritting, lean canvas

Crazy 8

The worst experience
 

How to close a dialog window

Activity

8 min

User flow

• Visual representation of the steps a user takes to achieve a goal on a website or app.
• It maps out how users navigate through a product, helping you understand their journey from start to finish.
• Provides a bird’s-eye view of the user’s experience.

• Helps designers anticipate user needs.

• Ensures that the interface supports a seamless experience.

• Identifies potential pain points and areas of friction in the user's journey.

• What the user is trying to do???

User flow

• Where the user begins (e.g., homepage, login screen).

• Decision Points: Choices the user must make (e.g., "Login" or "Sign Up").

• Actions/Tasks: What the user is trying to do (e.g., filling out a form).

• End Point: The final goal (e.g., completing a purchase, submitting a form).
   

• User flows are a crucial foundation for building wireframes and prototypes.

• They help ensure your design is user-centered and goal-oriented.

• Keep it simple and focused on the main task.

• Think like the user—what steps do they want to take?

• Don’t include solutions e.g. “clicks on the filter dropdown”.

• Big picture

User flow

Example: Check the status of your systems

1. User visits homepage.

2. User logs in

3. User views system dashboard

4. User navigates to account settings.

5. User logs out.

User flow - example

Visit homepage

Log in

View 

dashboard

Navigate to settings

Log out

Create a process map (or workflow diagram) illustrating steps a user takes when purchasing a ticket on the cinema's website.

Activity

8 min

Navigate to the Kino Scala page and attempt to purchase tickets for a movie of your choice for Saturday.

Map the process.

Activity

8 min

UI components

...are just shapes...

Is this layout difficult to sketch?

Crazy 8

Layout for cinema's landing page
 

• Program - what’s on

• Recommended movies

• Search field

• Special discount offer

Activity

8 min

Thank You!

Questions?