Information Architecture & UI Design


Published on

Mobile Applications Development - Lecture 4

Information Architecture & UI Design:
Sitemaps & Wireframing

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

Published in: Technology, Education
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Information Architecture & UI Design

  1. 1. Notations forInformation Architecture & UI Design Ivano Malavolta
  2. 2. Roadmap• Sitemaps• Wireframes
  3. 3. SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
  4. 4. SymbologyWe will use a basic symbologyfor diagramming information architecture and interaction design conceptsProposed by Jesse James Garrett he coined the term Ajax by the way Ajax,
  5. 5. Information ArchitectureIt is about• Conceptual Structure• Organization of ContentIt is NOT about navigation among views
  6. 6. Interaction DesignIt is about• navigation among views• how the user flows through defined tasksIt is NOT about navigation details buttons, checkboxes, pictures, etc… are defined here, they are part of wireframes
  7. 7. Goal of the symbologyto describe at a high level thestructure and flow of the user experience of a website or appFeatures:• Simple the focus is on the• Tool-independent macro-structure• Small• Self-contained
  8. 8. AudienceProject managers and Sponsors – to get a general sense of the projectContent Producers – to derive content requirementsInterface Designers – to derive interface design requirementsTechnologists – to derive functional requirementsInformation Architects – to derive navigational and interface requirements
  9. 9. Conceptual modelThe system presents the user with pathsThe user moves along these paths through actionsThese actions then cause the system to generate results
  10. 10. PagesPages are the fundamental unit of presentation they are also called viewsnot (necessarily) a unit of implementation one page in your diagram may correspond to multiple filesPages can be organized into a page stackA unique label can be associated to a page
  11. 11. FilesFiles are parcels of data without navigational propertiesThey are delivered to the user for use outside the appFiles can be organized into a file stackA unique label can be associated to a file
  12. 12. ConnectorsRelationships between elements are depicted with simple linesArrows to convey directionality they indicate how the user will move through the systemA crossbar on the opposite end of the arrow is used to prohibit upstream movement
  13. 13. Conditional ConnectorsIt is used when a path may or may not be presented to the user depending upon whether one or more conditions are met
  14. 14. ContinuationsContinuation points allow us to split our diagrams
  15. 15. AreasThey are used to identify a group of pages that share one or more common attributes ex. appearing in a pop-up window having some unique design treatment
  16. 16. Iterative AreasThey are used to represent architectures that involve repeating the same basic structure as it is applied to a number of functionally identical information elements ex. a product catalog in which each product has a number of associated pages
  17. 17. Conditional AreasIt is used when one or more conditions applies to a group of pages es. access permissionsan outgoing result is generated if the condition is not fulfilled
  18. 18. Flow areasIt encloses a sequence of steps that will appear repeatedly in the diagram es. login procedureThey require the two special types of continuation points: entry points and exit points
  19. 19. Concurrent SetIt is used when a user action generates multiple simultaneous results
  20. 20. Decision PointIt is used when a user action may generate one of a number of results and the system must make a results, decision about which result is to be presented
  21. 21. Conditional BranchIt is used is when the system (not based on user action) must select one path among a number of mutually exclusive options
  22. 22. Conditional SelectorSame as conditional branch, but paths arenot mutually exclusive
  23. 23. ClusterSimilar to conditional selector, system allows more than one path for certain conditions
  24. 24. Roadmap• Sitemaps• Wireframes
  25. 25. Wireframes• Views + user interaction + navigation
  26. 26. Lo-Fi WireframesA Lo-Fi wireframe is built on the sitemap and has a focus on • the LAYOUT of the views • interaction with elements within the views Low fidelity for preventing confusion of visual design concepts with information design concepts
  27. 27. Hi-Fi WireframesAn Hi-Fi wireframe is a refinement of a lo-fi wireframe lo- with a focus on • how each view will appear in details • sensory sensations of the usertypographycolour palettetextures+ everything about the look & feel
  28. 28. References 7