lean ux design: #2 structural design

I

Andrius Butkus2013

Lean UX Design#2 structural design patterns

Information architecture encompasses a wide range of problems. But regardless of the specific context or objectives of a given information architecture project, our concern is always with creating structures to facilitate effective communication. This notion is the core of our discipline.Jessie James Garrett

The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.Information Architecture Institute

While the graphic/web designer specializes in brilliant use of color, typography, texture, etc. to convey a message, the Information Architect looks at the architecture of the site from a more objective position. She might ask: what is the flow of users through our site? How does the software help the user catalog their information? How is that presented back to the user? Is that information helping the customer (ie: decision driving)?Andrew Maier

app screens

app screenshome screen

app screenshome screenstructure

How is mobile different?advantages: context, personal, easy/quick to uselimitations: screen size, bandwidth

but first...What kind of app?web app, native app, hybrid appcontent: static or dynamicuse of GPS, camera, etc

What kind of content?static or dynamicuse of GPS, camera, etc

hierarchyhub & spokenested dolltabbed viewbento boxfiltered view

structural patterns

hierarchy

typical website structure

hub & spoke

Flipboard

bento box

app store

nested doll

email

tabbed view

Weather

Clock

filtered view

iTunes

Calendar

endless screens

endless screens

current view

endless screens

current view

issuufacebookYouTube...

menumenu

?feature

X

content

home

facebookYouTube

contentcontent classification schemes?alphabeticaltopicaudiencetasksetc.

list space

PodcastsYouTubeissuufacebookYouTube...

hierarchyhub & spokenested dolltabbed viewbento boxfiltered view

structural patterns

?

structure gestures transitions

http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

gestalt lawsproximitysimilarityunitycontinuationclosureparallelismcommon region

proximity

similarity

unity

continuation

closure

parallelism

common region

left righttop downheadline

etc.

+ topdownbeliefs

using gestalt laws for detecting document type

jDataScience

649

font size

imagestext blocks

font face

colors

jDataScience

649

imagestext blocks

colors

GestaltPsychology

MachineLearning

jDataScience

31 text boxes2 image boxes

6 articles2 ads

jDataScience

proximitysimilarity

unitycontinuation

closureparallelism

common regiontop down

proximity 31 text boxes2 image boxes

jDataScience

Markov Random Fields

proximitysimilarity

unitycontinuation

closureparallelism

common regiontop down

31 text boxes2 image boxes

jDataScience

proximitysimilarity

unitycontinuation

closureparallelism

common regiontop down

31 text boxes2 image boxes

jDataScience

proximitysimilarity

unitycontinuation

closureparallelism

common regiontop down

31 text boxes2 image boxes

jDataScience

proximitysimilarity

unitycontinuation

closureparallelism

common regiontop down

6 articles2 ads

jDataScience

proximity

similarity

unity

continuation

closure

parallelism

common region

left righttop downheadline

etc.

+ topdownbeliefs

YOUR TURNjepic statement. market, problem, product.

advantages of MOBILE for your app?web, native, hybrid?data is static or dynamic?what stuctural patterns can you use? (reverse engineer)home screen?menu?content? endless stream?what navigation patterns can you use based on your data structure?gestalt laws you can use to help users navigate?

tools

stencils+

ISSUU hasn’t done a mobile app yet!...so this is your chance to design an awesome app and present it at issuu at the end of the semester

j

♥[ thanks ]

www.andriusbutkus.com