0
Notations forInformation Architecture      & UI Design            Ivano Malavolta       ivano.malavolta@univaq.it   http:/...
Roadmap• Sitemaps• Wireframes
SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
SymbologyWe will use a basic symbologyfor diagramming information architecture and interaction design conceptsProposed by ...
Information ArchitectureIt is about• Conceptual Structure• Organization of ContentIt is NOT about navigation among views
Interaction DesignIt is about• navigation among views• how the user flows through defined tasksIt is NOT about navigation ...
Goal of the symbologyto describe at a high level thestructure and flow of the user experience of a website  or appFeatures...
AudienceProject managers and Sponsors   – to get a general sense of the projectContent Producers   – to derive content req...
Conceptual modelThe system presents the user with pathsThe user moves along these paths through actionsThese actions then ...
PagesPages are the fundamental unit of presentation  they are also called viewsnot (necessarily) a unit of implementation ...
FilesFiles are parcels of data without navigational   propertiesThey are delivered to the user for use outside the appFile...
ConnectorsRelationships between elements are  depicted with simple linesArrows to convey directionality  they indicate how...
Conditional ConnectorsIt is used when a path may or may not be presented to  the user depending upon whether one or more  ...
ContinuationsContinuation points allow us to split our diagrams
AreasThey are used to identify a group of pages that share  one or more common attributes  ex. appearing in a pop-up windo...
Iterative AreasThey are used to represent architectures that involve  repeating the same basic structure as it is applied ...
Conditional AreasIt is used when one or more conditions applies to a  group of pages  es. access permissionsan outgoing re...
Flow areasIt encloses a sequence of steps that will appear  repeatedly in the diagram  es. login procedureThey require the...
Concurrent SetIt is used when a user action generates multiple  simultaneous results
Decision PointIt is used when a user action may generate one of a  number of results and the system must make a           ...
Conditional BranchIt is used is when the system (not based on user  action) must select one path among a number of  mutual...
Conditional SelectorSame as conditional branch, but paths arenot mutually exclusive
ClusterSimilar to conditional selector, system allows more  than one path for certain conditions
Roadmap• Sitemaps• Wireframes
Wireframes• Views + user interaction + navigation
Lo-Fi WireframesA Lo-Fi wireframe is built on the sitemap and has a  focus on   • the LAYOUT of the views   • interaction ...
Hi-Fi WireframesAn Hi-Fi wireframe is a refinement of a lo-fi wireframe                                        lo-  with a...
References                  http://jjg.net/ia/visvocabChapter 7
Upcoming SlideShare
Loading in...5
×

Information Architecture & UI Design

1,499

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).

http://www.di.univaq.it/malavolta

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,499
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
122
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Information Architecture & UI Design"

  1. 1. Notations forInformation Architecture & UI Design Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/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 http://jjg.net/ia/visvocabChapter 7
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×