Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

How to Design the Right User Interface

Top-Down UI Design ©

www.WizardUI.com

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

This Presentation contains:

> Top-Down Processes in Cognition (theory and examples).

> Top-Down UI Design © (How to design user interface starting from

what users think and understand and not what they see).

See the forest, not the trees (or see the users not the user interface)

2/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

“bottom-up processing (also known as data-driven processing: that

is, the outside data drive the system. Sensory inputs get registered

onto a sensory memory, and then are processed at higher and

higher levels…”

Top-Down Processes in Cognition – Bottom-up (1/2)

3/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

“Top-down processing (also known as conceptually-driven

processing): that is, your beliefs, cognitions, and expectations in

part drive the pattern recognition process… Basically, if you are

expecting to come across a certain pattern, then you are focusing

your attention on looking for evidence consistent with that pattern,

and not just automatically processing whatever is in view”.

Top-Down Processes in Cognition – Top-Down (2/2)

4/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

Did you ever have the feeling that

you saw an acquaintance and it

turned out to be a stranger?

Well, we see what we know and we are

mainly aware of familiar objects. In

addition, retrieval of information is

faster than recognition.

Top-Down Processes in Cognition Examples (1/3)

5/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

Even though the second letter in each word is ambiguous, top

down processing allows for easy disambiguation based on the

context

Top-Down Processes in Cognition Examples (2/3)

6/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

Watch this amazing video:

Top-Down Processes in Cognition Examples (3/3)

712

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

Top-Down Design © is a conceptually driven design

perspective which refers to the view that we should

understand the users first, the user types, their goals and

use cases, their environment (e.g. such as other applications

they regularly use) and their understanding and expectations

of the application.

Top-Down UI Design © (1/4)

8/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

we should understand what the users are thinking while using the

application. We should start our designs from system analysis including

object-actions analysis.

Top-Down UI Design © (2/4)

9/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

The Top-Down UI Design © (conceptually driven design perspective) is

opposed to wireframes or screen flow methodologies. wireframes

provide the trees but not the forest.

Top-Down UI Design © (3/4)

10/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

UI designers should be aware of the cognitive aspects in parallel to technical aspects.

Top-Down UI Design © (4/4)

11/12

Top-Down UI Design ©w

ww

.Wiza

rdU

I.com

For full text article click here.

You are welcome to visit our site: www.WizardUI.com

For any comment or question- write us!

Written by Adi Mazor-Kario, experienced user interface expert and the manager of Wizard UI Consulting (www.WizardUI.com), B.Sc.Tech, with honor in Education & Design and MA, with honor in Cognitive Science.

Thank you for watching!

12/12