11 info architecture
-
Upload
dr-v-vorvoreanu -
Category
Documents
-
view
687 -
download
0
Transcript of 11 info architecture
![Page 1: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/1.jpg)
CORPORATE PARTNER DAYS INFORMATION SESSIONS Learn more about these Technology industry partners:• what they do• how your major can apply to a career there• available internships• post-graduation opportunitiesFood and beverages provided. GENERAL MOTORSTuesday, February 26, 20136:00 - 7:30 p.m.Knoy Hall, B029
Representatives are interested in talking with students in CGT, CIT, ECET, MET and TLI
![Page 2: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/2.jpg)
Bill Buxton – Principal Researcher, Microsoft
https://twitter.com/wasbuxton
![Page 3: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/3.jpg)
![Page 4: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/4.jpg)
Today’s objectives:
1.Sketches, Wireframes, Mockups, Prototypes – what’s the difference?
2.Information Architecture
![Page 5: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/5.jpg)
Sketches
![Page 6: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/6.jpg)
Storyboard made with sketches
![Page 7: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/7.jpg)
Wireframe
![Page 8: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/8.jpg)
Mockup
![Page 9: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/9.jpg)
Prototype
Functionality
Interactivity
Simulates the final design
Can be:
Paper
Linked wireframes
Pre-alpha version
![Page 10: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/10.jpg)
Prototyping tool – InVision App
![Page 11: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/11.jpg)
Lo-Fi
Hi-Fi
SketchesWirefram
eMockupPrototyp
e
![Page 12: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/12.jpg)
Lo-Fi
Hi-FiPrototype
Sketches
Wireframe
Mockup
![Page 13: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/13.jpg)
Information Architecture
![Page 14: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/14.jpg)
Main pointsWhat is IA?
How do you represent IA in documents?
Card sorting
Topology: Breadth vs. Depth
Organization logics: task-based, user type, topical, org. structure, life event, implementation
from BGW 5
![Page 15: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/15.jpg)
http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Information Architecture
![Page 16: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/16.jpg)
http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Information Architecture
File naming > URL design!
http://www.slideshare.net/deanna.marbeck/url-design-for-information-architects-
presentation
![Page 17: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/17.jpg)
Why does information
architecture matter?
*How can information architecture affect usability?
![Page 18: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/18.jpg)
Organizeavailable information
to supportthe user’s tasks.
![Page 19: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/19.jpg)
How people navigateOptimal
rationalitySatisficing
(Information Foraging Theory)
![Page 20: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/20.jpg)
How people navigate
Benefit
Cost
![Page 21: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/21.jpg)
Navigation costsScanning page
Reading links / menus
Finding / Deciding where to click
Waiting for page to load
Clicking through to find desired page
How can you minimize
them?
![Page 22: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/22.jpg)
Broad Structure
Deep Structure
![Page 23: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/23.jpg)
Breadth & DepthDesign Recommendations
Magic number 7 ± 2 ????
Recommended depth: 3 levels
Recommended breadth: 16 options
![Page 24: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/24.jpg)
Card SortingUsability method for developing site
organization
![Page 25: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/25.jpg)
Organization LogicsSemantics (conceptual)
Task-based
Audience-based (user type)
Organization-based
Life event
Implementation
See also http://wd.onepotcooking.com/2010/02/13/information-architecture-navigation/
![Page 26: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/26.jpg)
![Page 27: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/27.jpg)
![Page 28: 11 info architecture](https://reader035.fdocuments.in/reader035/viewer/2022070317/5564470fd8b42ad6268b492d/html5/thumbnails/28.jpg)