Top Banner
Successful Information Architecture The Art and Science behind Successful Information Architecture
32

Successful Information Architecture - the art and science

Jan 27, 2015

Download

Software

Ivo Andreev

What is the cost of finding information? What is the cost of decisions  without proper information? And what about missing customers who cannot find you or your products?
A  successful information architecture enables people to step logically through a system confident that they are getting closer to what is needed. Somewhere between data and knowledge there is information that needs to be structured, organized, managed and properly tagged in order to be found and used.
However, putting together content in a form that can be understood and receive business value does not happen by chance. If you know the answers then you know the value of better navigation, improved usability and improved access to information.
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: Successful Information Architecture - the art and science

Successful Information Architecture

The Art and Science

behind Successful Information Architecture

Page 2: Successful Information Architecture - the art and science

About me

Ivelin Andreev The art and science behind a successful IA

• Project Manager @o 11 years professional experience

o .NET Web Development MCPD

o SQL Server 2012 (MCSA)

• Business Interests

o Web Development, SOA, Integration

o Security & Performance Optimization

o Horizon2020, Open BIM, GIS, Mapping

• Contact meo [email protected]

o www.linkedin.com/in/ivelin

o www.slideshare.net/ivoandreev

Page 3: Successful Information Architecture - the art and science

Agenda

• Information Architecture (IA)

• Information seeking behaviours

• Understand users

• Successful IA

• Top 10 IA mistakes

• Emotion and IA

• Tools & patterns

Ivelin Andreev The art and science behind a successful IA

Page 4: Successful Information Architecture - the art and science

¨I can’t find anything!¨

The symptom of a faulty information architecture

http://contemplativepathways.files.wordpress.com/2012/08/cornwalls­glendurgan_1280x.jpg

Page 5: Successful Information Architecture - the art and science

Still Wondering what IA is?

• In•for•ma•tion ar•chi•tec•ture n. (www.iainstitute.org)

1. Structural design for intuitive access to content

2. Organization, labeling and navigation to support usability and findability

3. Bring principles of architecture and design to IS

Page 6: Successful Information Architecture - the art and science

One of the most effective ways to define something is by 

identifying its boundaries

Page 7: Successful Information Architecture - the art and science

What isn’t IA

• Graphic Design: How it looks (Art)

• Interface Design: How it looks before I touch it (Science)

• Interaction Design: How it works after I touch it

• Web Design: How it works in a browser

• UX Design: How I feel about it

• Information Architecture: How it's organized

Page 8: Successful Information Architecture - the art and science

Why care about IA?

What is the cost:

• Finding information slowly

• Not finding informationo Bad decisions

o Duplicate effort

o Lost customers

• Maintenance

• Training

• Brand value

Page 9: Successful Information Architecture - the art and science

¨Knowledge is power¨

Information is [what] ?

http://www.michaelyamashita.com/gallery/large/Mekong_33.jpg

Page 10: Successful Information Architecture - the art and science

D-I-K-W

http://www.thinkinc.com/wp­content/uploads/2013/09/Data­Information­Knowledge­Wisdom.png

Page 11: Successful Information Architecture - the art and science

In Seek of Information

• Consumers (Findability)o Critical success factor

o Browse, search, ask…

• Providers (Managibility)o Efficient content management

o Clear policies and procedures

• Researchers (Science & Art)o Ethnography, Usability Engineering

o Ambiguity and complexity of human mind

Page 12: Successful Information Architecture - the art and science

Creativity

Proficiency

Usability

Reliability

Functionality

The Maslow Model Translated

Art

Science

Page 13: Successful Information Architecture - the art and science

Eyes don’t lie

Page 14: Successful Information Architecture - the art and science

Eye Tracking

• Measure eye activity

o Cost: 5’000$ - 40’000$

• Process & visualize data

• Interpret data

o What is seen

o Areas drawing attention

o How quickly the eye moves

o Path of gaze

o Measure the Index of Cognitive Activity

• Apply results

Page 15: Successful Information Architecture - the art and science

The F-Pattern

“Eyetracking visualizations show that users often read Web pages in an F-shaped pattern”

J.Nielsen

Page 16: Successful Information Architecture - the art and science

F-Pattern Implications

• Write for the Web, not for print-out

• Users do not read content thoroughly

• The first two paragraphs must state the important

• Start paragraphs and bullets with informative words

Page 17: Successful Information Architecture - the art and science

You Look Where They Look

Page 18: Successful Information Architecture - the art and science

How to (Methods & Deliverables)

• Design for somebody, not everybody

• Research rather than opinion

Step How

1. Stakeholder & user goals Interview

2. Define content Headings, Sections

3. Organize content Card sorting

4. Label content Thesauri, dictionaries

5. Functional aids Search, Wizards, Progress indicators, Retrieval algorithms

6. Navigation Site maps, Site flow diagrams

7. Mockup templates Wireframes

Page 19: Successful Information Architecture - the art and science

Users spend most of their time on other websitesJakob's Law of the Internet User Experience

http://moocnewsandreviews.com/wp­content/uploads/2013/06/MOOC­research­on­effective­habits­of­power­users.jpg

Page 20: Successful Information Architecture - the art and science

Characteristics of a Successful IA

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standardization

5. Error prevention

Page 21: Successful Information Architecture - the art and science

Characteristics of a Successful IA (2)

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize and recover from errors

Page 22: Successful Information Architecture - the art and science

Top 10 Information Architecture mistakes

http://arnequinze.com/root/footage_ChaosinMotion/ChaosinMotion02.jpg

Page 23: Successful Information Architecture - the art and science

Five Users are Enough!

http://www.nngroup.com/articles/card­sorting­how­many­users­to­test/

• N (1-(1- L ) n ) o N – total number of usability problems

o L – proportion of usability problems found by 1 user (typically 31%)

o n – actual users

Page 24: Successful Information Architecture - the art and science

Top IA Mistakes

1. No structure

2. Search and structure not integrated

3. Missing category landing pages

4. Extreme polyhierarchy

5. Microsites poorly integrated with main site

Page 25: Successful Information Architecture - the art and science

Top IA Mistakes (2)

6. Invisible options

7. Uncontrollable navigation elements

8. Inconsistent navigation

9. Too many techniques for navigation

10. Fancy termed menu items

Page 26: Successful Information Architecture - the art and science

¨Attractive things work better¨

Emotional Design, Don Norman (2004)

http://www.design42day.com/news/transportation/30751/sada­bike

Page 27: Successful Information Architecture - the art and science

Levels of Visual Design

Don Norman identified 3 levels:

Page 28: Successful Information Architecture - the art and science

It is not for the software product

Focus on the impact it leaves on customers

http://www.distractify.netdna­cdn.com/wp­content/uploads//2014/04/vyacheslavmishchenko­7­934x.jpg

Page 29: Successful Information Architecture - the art and science

Build UX for Emotion

“Emotional design is your insurance to maintain users’ trust when things go wrong”

Aaron Walter

• AppealingGrab the user’s attention and influence perception.

• EffectiveGuide the user’s attention, ensure he finds what he is looking for.

• PleasurableAllow the user to appreciate your website and have fun.

• MemorableBuild a relationship and ensure positive memory of you.

Page 30: Successful Information Architecture - the art and science

Tools & Patterns

• Heatmap (Demo)o http://crazyegg.com

• Design Patternso http://ui-patterns.com/patterns

• Sample Design Solutionso http://patterntap.com

o http://www.smileycat.com/design_elements/

• How To Guideso http://www.usability.gov/how-to-and-tools

o http://guidelines.usability.gov/

Page 31: Successful Information Architecture - the art and science

Takeaways

• Bookso “IA for the World Wide Web”, L.Rosenfeld & P.Morville

o “Emotional Design”, Donald Norman /2004/

o “Design for Emotion”, Aarron Walter /2011/

• Articles

o Nielsen Norman Group

o www.nngroup.com/articles/

o IA Institute

o www.iainstitute.org/library/

o UI Engineering

o www.uie.com/articles/

Page 32: Successful Information Architecture - the art and science

SQLSaturday #311 in October!

http://www.sqlsaturday.com/311/

jQuery Bulgaria, November

http://www.jquerybulgaria.com/

Upcoming events