Interface Design Mmde11

7/31/2019 Interface Design Mmde11

1/177

Layout and composition

12 sept e11


2/177

The capacity for perception depends on theamount, the kind and the availability of past

experiences.... We see familiar things moreclearly than we see objects about which wehave no stock of memories. Aldous Huxley


3/177

If you ask why something works and you pushback far enough, eventually everything seemsto be based on contrast: the ability to

distinguish one thing from another.Composition, sequencing, even legibility allrely on devices that affect the contrastbetween things. Chris Pulman, The Education of a GraphicDesigner


4/177

The primary purposes of graphic design are to:

Create a clear visual hierarchy of contrast, soyou can see at a glance what is important and

what is peripheral

Define functional regions of the page

Group page elements that are related, so thatyou can see structure in the content

http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
http://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.htmlhttp://webstyleguide.com/wsg3/7-page-design/3-visual-design.html


5/177

Composition


6/177

Composition balance - symmetrical


7/177

Composition symmetrical


8/177

Composition approximate symmetry


9/177

Composition approximate symmetry


10/177

Composition Asymmetrical


11/177


12/177

Composition Asymmetrical


13/177

Composition golden section

a+b is to a as a is to b

http://en.wikipedia.org/wiki/Golden_ratio


14/177

Composition golden section


15/177

Composition rule of thirds

Basically, the Rule of Thirds is asimplified version of the Golden ratioand as such poses a compositionalrule of thumb. Dividing a compositioninto thirds is an easy way to applydivine proportion without getting outyour calculator.


16/177


. Although the design uses a number of vibrantcolours, it is not noisy and seems to be bothsimple and clear. The navigation options areclearly visible and the structure of the siteseems to be easy to scan.


17/177


Rule of Thirds in use: two out of fourintersections of the lines (pink blocks) containexactly the information which the company

wants its visitors to see.


18/177

The Gestalt Principles The Gestalt effect refers to the form-forming capability of our senses,

particularly with respect to the visual recognition of figures and whole formsinstead of just a collection of simple lines and curves.

http://en.wikipedia.org/wiki/Gestalt_psychology

The whole is different from the sum of the parts = ?
http://en.wikipedia.org/wiki/Gestalt_psychologyhttp://en.wikipedia.org/wiki/Gestalt_psychology


19/177

The Gestalt Principles Figure/ground phenomenon


20/177

Prgnanz The fundamental principle of gestalt perception is the law of prgnanz (Germanfor pithiness ) which says that we tend to order our experience in a manner that is

regular, orderly, symmetric, and simple.

A stimulus will be organized into as good afigure as possible. Here, good means

regular, orderly, symmetric,and simple


21/177


22/177

The Gestalt laws basic rules of graphics

law of prgnanz

The figure-ground phenomenon,

The law of proximity

The law of similarity

The law of closure

The law of continuity

The law of symmetry

the law of common fate


23/177


24/177


25/177

The Gestalt Principles


26/177

Past Experience:

past experience and context have an effect of how we interpretand group elements.


27/177

Edgar Rubin, a Danish psychologist, was thefirst to systematically investigate the figure-

ground phenomenon. The phenomenoncaptures the idea that in perceiving a visualfield, some objects take a prominent role (thefigures) while others recede into thebackground (the ground). The visual field isthus divided into these two basic parts



28/177

In this example above, we must make a figureground relationship decision in order to

perceive affordance . Both of theseobjects are submit buttons, but the one on theleft looks as if it could be just another part of the page structure or background shading. Thebutton on the right graphically invites us andaffords pushing/clicking. Shading andhighlights have made clear what part of this isfigure and what part is ground.


http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.phphttp://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php


29/177

The Gestalt Principles The law of proximity

Some belong together more than others.

The distance between the objects showwhether they belong together or not.


30/177


31/177

The Gestalt Principles The law of (en)closure

Some objects are enclosed( by lines and boxes ), others are not.Objects in the same box seem as if they belong together.


32/177

Closure occurs when an object is incomplete ora space is not completely enclosed . If enoughof the shape is indicated, people percieve thewhole by filling in the missing infomation.

The Gestalt Principles The law of closure


33/177



34/177



35/177

Gestalt laws The law of similarity

Some objects look more alike than others


36/177

21 3 4

Similarity means that elements will be associated when they sharevisual characteristics such as shape, color, texture.

the objects in the illustrations will seem more and more differentfrom each other, but you still see them as part of a group.



37/177



38/177



39/177

W hat i sclo se together,b elo ngsto ge ther

Ob j e ct S wH i TS iM i LaR ITy, BE L ONG S T O G ETH eR.

The Gestalt Principles similarity/proximity


40/177


41/177

When similarity occurs, an object can beemphasized if it is dissimilar to the others. Thisis called anomaly .

G l l


42/177



43/177


44/177

The Gestalt Principles Continuation


45/177

The Gestalt Principles- Continuation

Elements placed on astraight line or a smoothcurve are percieved as agroup and interpreted as aas being more togetherthan elements not on theline or curve.

Universal principals of design,

Liddel, pub Rockport P 98


46/177

The idea of "common fate" is

simple: We perceive items orobjects moving (or appearing tomove) in the same direction asrelated to each other, more sothan elements that are stationaryor appear to be moving in

different directions. Those relateditems are sharing a "commonfate."

Common fate


47/177


48/177


49/177


50/177


51/177

Alignment

the adjustment of an object in relation withother objects, or a static orientation of someobject or set of objects in relation to others.

Alignment


52/177

Alignment


53/177

http://www.big.dk/
http://www.big.dk/http://www.big.dk/


54/177


55/177

Contrasts Visual contrasts are established by

changing the perceptual qualities of thevisual variables

These changes are perceived immediately

and effortlessly


56/177

the contrasts


57/177

the contrasts

The objects that are most in focus, seem closer, they will be read ordealt with first.

contrasts


58/177

contrasts

The contrasts - colour


59/177

The contrasts colour

the contrasts contrast opponent colours


60/177

the contrasts contrast opponent colours

the contrasts


61/177

the contrasts

The contrasts


62/177

The contrasts

the contrasts


63/177

the contrasts

The contrasts - size


64/177

The contrasts size

The contrast in size is the contrast between big/small.Basic contrast between the objects form and size.



65/177

The contrasts size

1234567 9



66/177

The contrasts size

Contrasts - texture


67/177

Texture is what gives a design the feeling of a surface. It is the tactile sense of the elements in thedesign. In Web design, texture is visual, but it provides the illusion of physical texture. Some

common textures are:

rough smooth hard soft

http://designm.ag/inspiration/textured-websites/

Contrasts texture

The contrasts form
http://designm.ag/inspiration/textured-websites/http://designm.ag/inspiration/textured-websites/http://designm.ag/inspiration/textured-websites/http://designm.ag/inspiration/textured-websites/


68/177

The contrasts - form

Contrast in form is the contrast betweenround square - trianglehard softtight loose

Basic contrasts between the forms of the objects



69/177


70/177



71/177


72/177

The 5 contrasts - strength


73/177

g

Weak

The 5 contrasts - strength


74/177

http://www.createbikes.com/

The contrasts - strength
http://www.createbikes.com/http://www.createbikes.com/


75/177


76/177


77/177

http://www.banksy.co.uk
http://www.banksy.co.uk/http://www.banksy.co.uk/


78/177


79/177


80/177


81/177

On the next slide there id a google search result Interesting inmany respects not only from a design perspective.

The search is julian assange should

Make a group of 3 4 people who you have spoken to least, andexamine the Google results page from the point of view of gestalt laws, contrasts and anything else that you can think of.

We will use the break + 15 minutes then I will call you back andwe can compare results.

Remember to have a break as well.


82/177

http://www.lingscars.com/
http://www.lingscars.com/http://www.lingscars.com/


83/177


84/177


85/177


86/177


87/177


88/177

What happens when you land at thebottom of a site?


89/177


90/177

In web sites paths are the consistent, predictablenavigational links that appear the same waythroughout the web site.

Paths can be purely in the users mind, as in yourhabitual navigation through a favourite newspapersite.

Paths can also be explicit site navigation elementssuch as breadcrumb trails that show you where you are

in relation to the overall site Figure 4.2 Twoexamples of breadcrumb trails in site headers.

webstyleguide
http://en.wikipedia.org/wiki/Breadcrumb_(navigation)http://en.wikipedia.org/wiki/Breadcrumb_(navigation)


91/177

The trunk test1 take a page at random and print it

2 hold it at arms length (so you cant see it closely)

3 Quickly find and circle the trunk test items

Site ID Local navigation

Page name sections + subsections

You are here Search


92/177

The trunk test (Dont make me think, Steve Krug)


93/177

Sections and SubsectionsGlobal navigation To assist users with navigation, place linksthat point to other sections and subsectionswithin the site. This helps users find all theinformation within a site, especially in thecase they get lost.

Local Navigation Within sections of a site, there are usuallysubsections, or a list of other pages that arerelated to the section. Navigation should be

provided to those pages on main sectionpages to enable users to easily find thosepages. This is similar to Sections and Subsections above.


Search


94/177

You Are HereIndicators There are many types of indicators that designersuse. Some designers use

reverse text when menubars are present. Somedesigners use tabs. Otherdesigners use acombination of thosefeatures.

Search Every page should contain the ability to search the site. In the case that users do notfind what they are looking for, they can operate the search feature to aid them ontheir quest.

See alsohttp:// www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/
http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/


95/177


96/177


97/177


98/177


99/177


100/177

Dont design in front of the computer


101/177


Choose structure
http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/blogspot/4836http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/facebook/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.slideshare.net/share/tweet/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py?contact=abg_afc&url=http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-to&hl=en&client=ca-pub-5203428669823392&adU=www.netrepublic.dk&adT=Web+Design+Til+Lavpris&adU=www.designschool.com&adT=Design+Skole+i+Spanien&adU=www.ironspeed.com&adT=Free+C%23+code+generator&gl=DK&usg=AFQjCNFmmOSLvT7N_559cxl8qegXO3aAuQhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=BC3xjW7qdTaycLZCj8APdpMnBAY2o49AB_dysjBjAjbcBwPVBEAMYAyDhlrQJKAM4AFCMl-WMBWDRmbmC0AegAcetrv8DsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvgAIB4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=3&sig=AGiWqtwEqfMTOObw6DIzwMgoi1XDkDbiNg&client=ca-pub-5203428669823392&adurl=http://www.ironspeed.com/googlecloud.aspx&nm=5http://googleads.g.doubleclick.net/aclk?sa=l&ai=BRcfmW7qdTaycLZCj8APdpMnBAZnOhPAB0casmRfAjbcBsJ8aEAIYAiDhlrQJKAM4AFD22ZuP-f____8BYNGZuYLQB6ABrbmT7gOyARJ3d3cuc2xpZGVzaGFyZS5uZXS6AQozMDB4MjUwX2FzyAEB2gFWaHR0cDovL3d3dy5zbGlkZXNoYXJlLm5ldC93ZWJkaXJlY3Rpb25zL2Rvbm5hLW1hdXJlci1pbmZvcm1hdGlvbi1hcmNoaXRlY3R1cmUtYS1ob3ctdG-AAgGpAj0pvpo29bc-4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=2&sig=AGiWqtzo5CDzX3mN0XiavDLeLYUvd18HVQ&client=ca-pub-5203428669823392&adurl=http://www.designschool.com&nm=2http://googleads.g.doubleclick.net/aclk?sa=L&ai=Bgk-gW7qdTaycLZCj8APdpMnBAfXotYkCvfjq6iLAjbcB0IHVARABGAEg4Za0CSgDOABQ7NqE8QZg0Zm5gtAHsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvqQI6iHRuDrSJPuACAOoCEXNsaWRldmlld19yaWdodF8xkAPIBpgDrAKoAwHIAxfoA4gD6APBB-gD_QPoA7QF9QMgADDE4AQB&num=1&sig=AGiWqtx1AWgvYj_tctJn1sEqyKyA6FEFlw&client=ca-pub-5203428669823392&adurl=http://www.netrepublic.dk/index.htmlhttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirectionshttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py?contact=abg_afc&url=http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-to&hl=en&client=ca-pub-5203428669823392&adU=www.lynda.com/learn/Adobe&adT=ImageAd&gl=DK&usg=AFQjCNEZLMRmEMYjcd81R1IT0CKQonOKPg


102/177

Choose structure

Choose structure


103/177

Choose structure

Choose structure


104/177

Choose structure

Choose structure


105/177

Choose structure

Design catagories groups chunks


106/177

Design catagories, groups, chunks

Choose classification schemes
http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/blogspot/4836http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/facebook/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.slideshare.net/share/tweet/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py?contact=abg_afc&url=http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-to&hl=en&client=ca-pub-5203428669823392&adU=www.netrepublic.dk&adT=Web+Design+Til+Lavpris&adU=www.designschool.com&adT=Design+Skole+i+Spanien&adU=www.ironspeed.com&adT=Free+C%23+code+generator&gl=DK&usg=AFQjCNFmmOSLvT7N_559cxl8qegXO3aAuQhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=BC3xjW7qdTaycLZCj8APdpMnBAY2o49AB_dysjBjAjbcBwPVBEAMYAyDhlrQJKAM4AFCMl-WMBWDRmbmC0AegAcetrv8DsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvgAIB4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=3&sig=AGiWqtwEqfMTOObw6DIzwMgoi1XDkDbiNg&client=ca-pub-5203428669823392&adurl=http://www.ironspeed.com/googlecloud.aspx&nm=5http://googleads.g.doubleclick.net/aclk?sa=l&ai=BRcfmW7qdTaycLZCj8APdpMnBAZnOhPAB0casmRfAjbcBsJ8aEAIYAiDhlrQJKAM4AFD22ZuP-f____8BYNGZuYLQB6ABrbmT7gOyARJ3d3cuc2xpZGVzaGFyZS5uZXS6AQozMDB4MjUwX2FzyAEB2gFWaHR0cDovL3d3dy5zbGlkZXNoYXJlLm5ldC93ZWJkaXJlY3Rpb25zL2Rvbm5hLW1hdXJlci1pbmZvcm1hdGlvbi1hcmNoaXRlY3R1cmUtYS1ob3ctdG-AAgGpAj0pvpo29bc-4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=2&sig=AGiWqtzo5CDzX3mN0XiavDLeLYUvd18HVQ&client=ca-pub-5203428669823392&adurl=http://www.designschool.com&nm=2http://googleads.g.doubleclick.net/aclk?sa=L&ai=Bgk-gW7qdTaycLZCj8APdpMnBAfXotYkCvfjq6iLAjbcB0IHVARABGAEg4Za0CSgDOABQ7NqE8QZg0Zm5gtAHsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvqQI6iHRuDrSJPuACAOoCEXNsaWRldmlld19yaWdodF8xkAPIBpgDrAKoAwHIAxfoA4gD6APBB-gD_QPoA7QF9QMgADDE4AQB&num=1&sig=AGiWqtx1AWgvYj_tctJn1sEqyKyA6FEFlw&client=ca-pub-5203428669823392&adurl=http://www.netrepublic.dk/index.html


107/177

Web Directions SouthInformation architecture: Ahow -to

Choose classification schemes Date Alphabetical Geography Task

Audience Topic

formal, existing ones- dewey,

informal, developedfor the purpose

Date is a natural organisationscheme for anything thathappened, or will happen at apoint in time. It works best

when people are looking atthe site frequently. If this isnot the case, alternateorganisation schemes will benecessary so people can

easily find relevant historicalcontent.



108/177



Audience Topic

formal, existing ones -dewey,

informal, developed forthe purpose

An alphabetical scheme suits contentarranged by name (such as author orartist), where the name is clear and itis likely people will look for thecontent by the name.

Few sites use alphabetical as theprimary organisation scheme. A-Zindexes, as supplemental navigation,provide a terrific alternate method

for finding content as long as theindex uses labels that are sensible forsite readers.



109/177



Audience Topic

formal, existing ones -dewey, LOC, commodity

informal, developed forthe purpose

A geographical organisationscheme is perfect foranything relating to physical

geography, particularlytravel sites. Some sites stillmake you choose yourcountry before letting youin, but this practice is lesscommon than it once was.


110/177



111/177


Audience Topic


informal, developedfor the purpose.

Audience-based schemes are also aninteresting challenge. In order forthem to work, people must be ableto clearly associate with one of theaudiences. People are often temptedto implement role-based systems forintranets - these often fail as it isdifficult to determine what your roleactually is.


112/177


113/177

Card SortingA brief introduction


114/177

What if things dont fit?


115/177

What if things don t fit ?

Other methods of sorting may not be so easyto understand

Folk taxonomies (social knowledge) Contextual Others?


116/177

The trunk test (Steve Krug)

You imagine you have been locked in the boot

of a car driven around for a while and let out.

How do you find out where you are?


117/177


118/177

In his book The Image of the City (1960), Kevin Lynch coined the term wayfinding to describe his concept ofenvironmental legibility.

Orientation: Where am I am right now?

Route decisions: Can I find the way to where I want to go?

Mental mapping: Are my experiences consistent andunderstandable enough to know where Ive been and topredict where I should go next?

Closure: Can I recognize that I have arrived in the rightplace?
http://www.amazon.com/exec/obidos/tg/detail/-/0262620014/webstyleguidehttp://en.wikipedia.org/wiki/Kevin_A._Lynchhttp://en.wikipedia.org/wiki/Kevin_A._Lynchhttp://www.amazon.com/exec/obidos/tg/detail/-/0262620014/webstyleguide


119/177


120/177

h


121/177

Steve Krug

What site is this?

What page am I on?

What are the major sections ofthe site?

What are my options at thislevel?

Where am I in the scheme ofthings?

How do I search?

Kevin Lynch

Orientation: Where am I am

right now?

Route decisions: Can I find theway to where I want to go?

Mental mapping: Are myexperiences consistent andunderstandable enough to knowwhere Ive been and to predictwhere I should go next?

Closure: Can I recognize that Ihave arrived in the rightplace?


122/177

(Krug, 2006)

What happens when you land at thebottom of a site?


123/177

In web sites paths are the consistent predictable


124/177

In web sites paths are the consistent, predictablenavigational links that appear the same waythroughout the web site.

Paths can be purely in the users mind, as in yourhabitual navigation through a favourite newspapersite.

Paths can also be explicit site navigation elementssuch as breadcrumb trails that show you where you arein relation to the overall site Figure 4.2 Twoexamples of breadcrumb trails in site headers.

webstyleguide
http://en.wikipedia.org/wiki/Breadcrumb_(navigation)http://en.wikipedia.org/wiki/Breadcrumb_(navigation)


125/177


126/177

Sections and Subsections



127/177

Sections and SubsectionsGlobal navigation To assist users with navigation, place links

that point to other sections and subsectionswithin the site. This helps users find all theinformation within a site, especially in thecase they get lost.

Local Navigation Within sections of a site, there are usuallysubsections, or a list of other pages that arerelated to the section. Navigation should beprovided to those pages on main sectionpages to enable users to easily find thosepages. This is similar to Sections and Subsections above.


Search Every page should contain the ability to search the site In the case that users do not


128/177

You Are HereIndicators There are many types of indicators that designersuse. Some designers usereverse text when menubars are present. Somedesigners use tabs. Otherdesigners use acombination of thosefeatures.

Every page should contain the ability to search the site. In the case that users do notfind what they are looking for, they can operate the search feature to aid them ontheir quest.

See alsohttp:// www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/
http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/http://www.ikea.com/dk/da/catalog/categories/departments/bedroom/10681/


129/177

Designing information structure


130/177



131/177

g p
http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/blogspot/4836http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/share/facebook/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.slideshare.net/share/tweet/4836/Check%20out%20this%20SlideShare%20presentation%20:%20Donna%20Maurer%20-%20Information%20architecture:%20a%20%22...http://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py?contact=abg_afc&url=http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-to&hl=en&client=ca-pub-5203428669823392&adU=www.netrepublic.dk&adT=Web+Design+Til+Lavpris&adU=www.designschool.com&adT=Design+Skole+i+Spanien&adU=www.ironspeed.com&adT=Free+C%23+code+generator&gl=DK&usg=AFQjCNFmmOSLvT7N_559cxl8qegXO3aAuQhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=BC3xjW7qdTaycLZCj8APdpMnBAY2o49AB_dysjBjAjbcBwPVBEAMYAyDhlrQJKAM4AFCMl-WMBWDRmbmC0AegAcetrv8DsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvgAIB4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=3&sig=AGiWqtwEqfMTOObw6DIzwMgoi1XDkDbiNg&client=ca-pub-5203428669823392&adurl=http://www.ironspeed.com/googlecloud.aspx&nm=5http://googleads.g.doubleclick.net/aclk?sa=l&ai=BRcfmW7qdTaycLZCj8APdpMnBAZnOhPAB0casmRfAjbcBsJ8aEAIYAiDhlrQJKAM4AFD22ZuP-f____8BYNGZuYLQB6ABrbmT7gOyARJ3d3cuc2xpZGVzaGFyZS5uZXS6AQozMDB4MjUwX2FzyAEB2gFWaHR0cDovL3d3dy5zbGlkZXNoYXJlLm5ldC93ZWJkaXJlY3Rpb25zL2Rvbm5hLW1hdXJlci1pbmZvcm1hdGlvbi1hcmNoaXRlY3R1cmUtYS1ob3ctdG-AAgGpAj0pvpo29bc-4AIA6gIRc2xpZGV2aWV3X3JpZ2h0XzGQA8gGmAOsAqgDAcgDF-gDiAPoA8EH6AP9A-gDtAX1AyAAMMTgBAE&num=2&sig=AGiWqtzo5CDzX3mN0XiavDLeLYUvd18HVQ&client=ca-pub-5203428669823392&adurl=http://www.designschool.com&nm=2http://googleads.g.doubleclick.net/aclk?sa=L&ai=Bgk-gW7qdTaycLZCj8APdpMnBAfXotYkCvfjq6iLAjbcB0IHVARABGAEg4Za0CSgDOABQ7NqE8QZg0Zm5gtAHsgESd3d3LnNsaWRlc2hhcmUubmV0ugEKMzAweDI1MF9hc8gBAdoBVmh0dHA6Ly93d3cuc2xpZGVzaGFyZS5uZXQvd2ViZGlyZWN0aW9ucy9kb25uYS1tYXVyZXItaW5mb3JtYXRpb24tYXJjaGl0ZWN0dXJlLWEtaG93LXRvqQI6iHRuDrSJPuACAOoCEXNsaWRldmlld19yaWdodF8xkAPIBpgDrAKoAwHIAxfoA4gD6APBB-gD_QPoA7QF9QMgADDE4AQB&num=1&sig=AGiWqtx1AWgvYj_tctJn1sEqyKyA6FEFlw&client=ca-pub-5203428669823392&adurl=http://www.netrepublic.dk/index.htmlhttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirectionshttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-tohttp://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py?contact=abg_afc&url=http://www.slideshare.net/webdirections/donna-maurer-information-architecture-a-how-to&hl=en&client=ca-pub-5203428669823392&adU=www.lynda.com/learn/Adobe&adT=ImageAd&gl=DK&usg=AFQjCNEZLMRmEMYjcd81R1IT0CKQonOKPg


132/177

Choose structure


133/177

Choose structure


134/177

Facets are often derived by analysis of the text of an item using entityextraction techniques or from pre-existing fields in the database such as author, descriptor,language, and format. This approach permits existing web-pages, product descriptions orarticles to have this extra metadata extracted and presented as a navigation facet.

Choose structure
http://en.wikipedia.org/wiki/Entity_extractionhttp://en.wikipedia.org/wiki/Entity_extractionhttp://en.wikipedia.org/wiki/Entity_extractionhttp://en.wikipedia.org/wiki/Entity_extraction


135/177


136/177



137/177


Date Alphabetical Geography Task Audience Topic


informal, developedfor the purpose

Date is a natural organisationscheme for anything thathappened, or will happen at apoint in time. It works best

when people are looking atthe site frequently. If this isnot the case, alternateorganisation schemes will benecessary so people caneasily find relevant historicalcontent.


138/177


139/177



140/177


Date Alphabetical Geography Task Audience Tag-based Topic


informal, developedfor the purposal

Task-based schemes are aninteresting challenge. Inorder for them to work, the

tasks must be clear andunambiguous.


141/177


142/177

C d S ti g


143/177

Card SortingA brief introduction


144/177

What if things dont fit?


145/177

Other methods of sorting may not be so easyto understand

Folk taxonomies (social knowledge)

Contextual Others?


146/177

What is Card Sorting?


147/177

Start with a stack of cards(one item per card)

Users sort cards intogroups that makesense to them

A technique for exploring users mental models

How do you do it?


148/177

Card sorting is a simple technique in usability design where agroup of subject experts or "users", however inexperiencedwith design, are guided to generate a category tree orfolksonomy. It is a useful approach for designing workflows,menu structure, or web site navigation paths. Card sorting hasa characteristically low-tech approach. The concepts are firstidentified and written onto simple index cards or Post-itnotes. The user group then arranges these to represent thegroups or structures they are familiar with.

http://en.wikipedia.org/wiki/Card_sorting
http://en.wikipedia.org/wiki/Card_sortinghttp://en.wikipedia.org/wiki/Card_sorting


149/177

What are the drawbacks?


150/177

Not goal driven, shows understanding ratherthan needs.

Can be big differences between users so the

users thoughts and thoughts could be moreuseful

Doesn't take the user situation into account.


151/177


152/177

Closed Card Sorting


153/177

The person organizes cards into pre-namedcategories

When to do it: When you are trying to evaluate an existing

information architecture, or confirm a proposed

Information architecture.


154/177

After the sorting is done


155/177

1. Record the results Spreadsheet Draw a picture/take a photograph of the

categories (see proximity and organization of the

piles)2. Analyze the results

Look for patterns Cluster analysis

3. Incorporate results into design

Navigation examples


156/177

is a term to describe user interfaces (especially in

websites) in which it is inordinately difficult forusers to discern the destinations of navigationalhyperlinks or, in severe cases, even to determine wherethe hyperlinks are. The typical form of MMN isrepresented by menus composed of unrevealing icons thatare replaced with explicative text only when the mousecursor hovers over them.

(Architects are particularly bad in this respect)

Navigation examples www.visitdenmark.com

Mystry meat - http://www.torchia.com/
http://www.visitdenmark.com/http://www.torchia.com/http://www.torchia.com/http://www.visitdenmark.com/


157/177


158/177

http://songza.fm /

http://songza.fm/http://songza.fm/http://www.visitdenmark.com/http://www.visitdenmark.com/http://songza.fm/http://songza.fm/


159/177

Radial context

menu aka.pie menu

Especially useful withstylus input.

http://songza.fm/http://www.visitdenmark.com/http://www.visitdenmark.com/http://www.dontclick.it/


160/177

http://www.dontclick.it/
http://www.dontclick.it/http://www.dontclick.it/http://www.dontclick.it/


161/177


162/177

Points of interest?

Hotspots?


163/177

One might argue that theblackened breast serves as a

green light of sorts: a signalto subsequent travelers thatprior others who have trodon these steps havetransgressed ;

http://www.popmatters.com/pm/post/breasts-and-public-behavior/

Navigation in real life m
http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.popmatters.com/pm/post/breasts-and-public-behavior/http://www.visitdenmark.com/


164/177

Navigation in real life m
http://www.visitdenmark.com/


165/177

Layar reality browser (maybe wecan hold a website in ourhands?)

using search data driven


166/177

navigation superimposed ontorealtime camera image using gps.

Social network people identifier;


167/177


168/177


169/177


170/177


171/177

Using the data to drive navigation


172/177

http://mapumental.channel4.com

http://mapumental channel4 com/T/tKzLSHEHP5snHPsCT

Using the data to drive navigation
http://mapumental.channel4.com/http://mapumental.channel4.com/T/tKzLSHEHP5snHPsCThttp://mapumental.channel4.com/T/tKzLSHEHP5snHPsCThttp://mapumental.channel4.com/http://mapumental.channel4.com/http://www.gapminder.org/


173/177

http://www.gapminder.org/

University of Hamburg researchers found that the Web is moving from a statichypertext information system to dynamic interactive services with rapidinteractivity between man and machine. The authors recommend that webd l t i f t l di g b g t k ith th d f
http://www.gapminder.org/http://www.gapminder.org/http://www.gapminder.org/


174/177

developers create concise, fast loading web pages to keep pace with the speed of web navigation.

The Hamburg researchers found an F-shaped pattern of clicking activity similar toresults found in eye tracking studies. There appears to be a strong link between oureye and hand movements over the surface of web pages.

(Weinreich et al. 2006)

http://www.websiteoptimization.com/speed/tweak/clickstream

http://www.bedstpaanettet.dk especiallycheck out the section
http://www.websiteoptimization.com/speed/tweak/clickstream/http://www.websiteoptimization.com/speed/tweak/clickstream/http://www.bedstpaanettet.dk/http://www.bedstpaanettet.dk/


175/177

check out the section

http://www.ucc.ie/hfrg/emmus/methods/cardsort.html

http://www.useit.com/papers/sun/cardsort.html

http://patternry.com/

http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/
http://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://patternry.com/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://patternry.com/http://patternry.com/http://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.html


176/177

References and links


177/177

http://www.designconsolidated.com.au/graphic-design-principles/presentation.htm

http://www.ucc.ie/hfrg/emmus/methods/cardsort.html

http://www.useit.com/papers/sun/cardsort.html

http://patternry.com/

http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/
http://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://patternry.com/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial/http://patternry.com/http://patternry.com/http://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.useit.com/papers/sun/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.ucc.ie/hfrg/emmus/methods/cardsort.htmlhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htmhttp://www.designconsolidated.com.au/graphic-design-principles/presentation.htm

Interface Design Mmde11

Documents

Transcript of Interface Design Mmde11