Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IA Essentials: How to prioritize, design, and ...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for James Barrett James Barrett
April 26, 2014
Design
590
2

IA Essentials: How to prioritize, design, and present your clients content

My Information Architecture presentation from WordCamp Minneapolis 2014,

Avatar for James Barrett

James Barrett

April 26, 2014

More Decks by James Barrett

See All by James Barrett
Fish Fingers & Custard: How to give your client what they want, even if they don’t know they want it.
Avatar for James Barrett jimbrts
0
100

Other Decks in Design

See All in Design
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
200
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
350
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
1
600
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
450
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
210
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
540
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
170
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
140
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
810
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
220
Signull 団体説明資料
Avatar for Signull signull
0
570

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
530
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
540
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
190
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
170
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k

Transcript

  1. IA Essentials: How to prioritize, design, and present your clients

    content

  2. James Barrett Design Engineer - 10up @jimbrts

  3. Why Information Architecture is Important

  4. Why Information Architecture is important •Websites are non linear •Information

    is vast and varied •Websites should be goal oriented.

  5. 5 Websites are non linear

  6. 6 Information is vast and varied Image Gallery Testimonials Blog

    Posts User Comments Links Page Content Quotes Code snippets Forms

  7. Websites should be goal oriented. GOAL

  8. Let’s get Started

  9. 9 Getting Started •Finding a “voice” •Content Organizing •Visual layout

    and prioritization

  10. The “Voice” of a Website •The stakeholder sets the tone.

    •Listen. Then Listen some more. Then Listen again. •Pay attention to patterns and repeated ideas.

  11. The “Voice” of a Website Get in Touch vs Let’s

    Chat vs Contact Us

  12. Organizing your Content

  13. None
  14. None
  15. None
  16. None
  17. None

  18. Visual layout and prioritization

  19. 19 Visual layout and prioritization •Structure your design so that

    its guides readers to your goal. ! •Visual Design compliments good information architecture ! •Give readers plenty of opportunities to drive deeper into the site

  20. 20 Structure your site’s layout so it guides readers to

    your goal

  21. 21 Structure your site’s layout so it guides readers to

    your goal

  22. 22 Structure your site’s layout so it guide’s readers to

    your goal

  23. 23 Structure your site’s layout so it guide’s readers to

    your goal

  24. 24 Structure your site’s layout so it guide’s readers to

    your goal

  25. 25 Structure your site’s layout so it guides readers to

    your goal

  26. 26 Structure your site’s layout so it guides readers to

    your goal

  27. 27 Structure your site’s layout so it guides readers to

    your goal

  28. 28 Structure your site’s layout so it guide’s readers to

    your goal

  29. 29 Visual Design Compliments Good IA •Design supports content •Interactions

    should be easily identifiable ! •links should be clearly identified.

  30. 30 Example: Gallery Design

  31. None
  32. None
  33. None
  34. None

  35. Example: 404

  36. None
  37. None
  38. None

  39. Give readers plenty of opportunities to drive deeper into the

    site •At least 3 CTAs per page to your goal * •Evenly space the through out the page ! •Maintain your “voice” * Opinion. not fact

  40. Give readers plenty of opportunities to drive deeper into the

    site

  41. Maintain your “Voice” Get in Touch vs Let’s Chat vs

    Contact Us

  42. Final Thoughts •Find your Voice •Organize your Content ! •Keep

    your site goal oriented.

  43. Questions? @jimbrts