Top Banner
FROM PROTOTYPING TO OPTIMIZATION UX/UI a continuous process www.eweev.com
19

From Prototyping to Optimization; UX/UI a continuous process

Apr 16, 2017

Download

Design

ArabNet ME
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: From Prototyping to Optimization; UX/UI a continuous process

FROM PROTOTYPING TO OPTIMIZATIONUX/UI a continuous process

www.eweev.com

Page 2: From Prototyping to Optimization; UX/UI a continuous process

What isINTERACTIVE MEDIA?

Page 3: From Prototyping to Optimization; UX/UI a continuous process

It’s products and services on digital computer based systems.

SAMPLES: Websites, mobile apps, video games, ATMs, Park-meter

DEFINITION INTERACTIVE MEDIA

A method of communication in which theprogram’s outputs depend on the user input.

Page 4: From Prototyping to Optimization; UX/UI a continuous process

How do you startDESIGNING AN INTERACTIVE

PROJECT?

Page 5: From Prototyping to Optimization; UX/UI a continuous process

HOW TO START THE THINKING PROCESS

DEFINE the VALUE PROPOSITION (s) of the interactive project.

STORYBOARDING

DON’T JUMP INTO DESIGNING SCREENS or CODING

CREATE PAPER PROTOTYPE

TEST PAPER PROTOTYPE

CREATEDIGITAL MOCKUPS

Time

Steps

1

2

3

4

Page 6: From Prototyping to Optimization; UX/UI a continuous process

STEP 1: STORYBOARDING

You don’t have to be a SUPER ILLUSTRATOR

It’s not about pretty pictures

SAMPLE: An evening out in the city & the user interface that helps you find restaurants

FOCUS ON:1- The setting2- People involved3- Tasks accomplished

Video prototype to illustrate the setting and task and share it with team members

Page 7: From Prototyping to Optimization; UX/UI a continuous process

STEP 2: PAPER PROTOTYPE

What makes a good paper prototype? Work fast – 5 minutes => low cost

SHARE WITH OTHERSFocus on the conversation & feedback

Iterating over time

Test multiple options

IT’s the process to stimulate everyone’s creativity into FINDING SOLUTIONS

IT’S NOT HERE IS WHAT I WILL BUILD

Page 8: From Prototyping to Optimization; UX/UI a continuous process

STEP 3: MOCK-UP

NOW YOU CAN GO DIGITAL

At this level you have more design critic

What to keep in mind when creatingDIGITAL MOCK-UPS?

The focus is NOT on the VISUAL DESIGN

BUT NOT YET THE TIME TO USE COLORS!

Page 9: From Prototyping to Optimization; UX/UI a continuous process

What areUSABILITY HEURISTICS?

Page 10: From Prototyping to Optimization; UX/UI a continuous process

10 USABILITY HEURISTICS

Loading

Trash

Page 11: From Prototyping to Optimization; UX/UI a continuous process

10 USABILITY HEURISTICS

Don’t force people down fixed paths

Page 12: From Prototyping to Optimization; UX/UI a continuous process

10 USABILITY HEURISTICS

Page 13: From Prototyping to Optimization; UX/UI a continuous process

10 USABILITY HEURISTICS

Page 14: From Prototyping to Optimization; UX/UI a continuous process

10 USABILITY HEURISTICS

Page 15: From Prototyping to Optimization; UX/UI a continuous process

CONGRATULATIONS!You just designed the most awesome interface.

Do you think you are done?

Page 16: From Prototyping to Optimization; UX/UI a continuous process

TRACK USER BEHAVIOUR

You don’t come with the app.

Get beta users to try your interactiveproject and record their interactions.

USER TESTING

CHECK WITH THE EXTREME CASES The user is drunk!

The user is my mom :-)

Page 17: From Prototyping to Optimization; UX/UI a continuous process

TRACK USER BEHAVIOUR

Bounce rate

Behaviour flow

POWERFUL TRACKINGTOOLS

For mobile apps, you can use

Page 18: From Prototyping to Optimization; UX/UI a continuous process

TRACK USER BEHAVIOUR

Heatmaps Confetti - Click map

POWERFUL TRACKINGTOOLS

For mobile apps, you can use

Page 19: From Prototyping to Optimization; UX/UI a continuous process

THANK YOUQUESTIONS?

DESIGN . TRACK . OPTIMIZE

www.eweev.com