Lean UX Design: #2 Structural Design

Download Lean UX Design: #2 Structural Design

Post on 12-Mar-2016

215 views

Category:

Documents

2 download

DESCRIPTION

Information Architecture & Gestalt Laws. (DTU 2013)

TRANSCRIPT

  • IAndrius 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 dierent?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

    WeatherClock

  • filtered view

    iTunesCalendar

  • 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 boxesjDataScience

    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 hasnt 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