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

Transcript

1. Notations for Notations for Information Architecture Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
2. Roadmap • Sitemaps • Sitemaps • Wireframes
3. Sitemaps They represent: • relationship relationship relationship relationship of content to other content and • relationship relationship relationship relationship of content to other content and • how the user travels travels travels travels through the information space
4. Symbology We will use a basic symbology We will use a basic symbology for diagramming information information information information architecture architecture architecture architecture and interaction design interaction design interaction design interaction design concepts concepts concepts concepts Proposed by Jesse James Garrett Proposed by Jesse James Garrett he coined the term Ajax Ajax Ajax Ajax, by the way
5. Information Architecture It is about It is about • Conceptual Structure Structure Structure Structure • Organization of Content Content Content Content It is NOT NOT NOT NOT about navigation among views
6. Interaction Design It is about • navigation navigation navigation navigation among views • how the user flows flows flows flows through defined tasks It is NOT NOT NOT NOT about navigation details It is NOT NOT NOT NOT about navigation details buttons, checkboxes, pictures, etc… are defined here, they are part of wireframes
7. Goal of the symbology to describe at a high high high high level level level level the structure and flow of the user experience of a website structure and flow of the user experience of a website or app Features: • Simple the focus is on the • Tool-independent • Small • Self-contained the focus is on the macro-structure
8. Audience Project Project Project Project managers managers managers managers and and and and Sponsors Sponsors Sponsors Sponsors – to get a general sense of the project Content Content Content Content Producers Producers Producers Producers – to derive content requirements I I I Interface nterface nterface nterface Designers Designers Designers Designers – to derive interface design requirements Technologists Technologists Technologists Technologists – to derive functional requirements Information Information Information Information Architects Architects Architects Architects – to derive navigational and interface requirements
9. Conceptual model The system presents the user with paths paths paths paths The user moves along these paths through actions actions actions actions The user moves along these paths through actions actions actions actions These actions then cause the system to generate results results results results
10. Pages Pages are the fundamental unit of presentation they are also called views views views views they are also called views views views views not (necessarily) a unit of implementation one page in your diagram may correspond to multiple files Pages can be organized into a page stack A unique label can be associated to a page
11. Files Files are parcels of data without navigational properties properties They are delivered to the user for use outside the app Files can be organized into a file stack A unique label can be associated to a file
12. Connectors Relationships Relationships Relationships Relationships between elements are depicted with simple lines depicted with simple lines Arrows Arrows Arrows Arrows to convey directionality they indicate how the user will move through the system A crossbar crossbar crossbar crossbar on the opposite end of the arrow is used to prohibit upstream movement
13. Conditional Connectors It is used when a path may or may not be presented to the user depending upon whether one or more the user depending upon whether one or more conditions conditions conditions conditions are met
14. Continuations Continuation points allow us to split split split split our diagrams
15. Areas They are used to identify a group of pages group of pages group of pages group of pages that share one or more common attributes one or more common attributes ex. appearing in a pop-up window having some unique design treatment
16. Iterative Areas They are used to represent architectures that involve repeating repeating repeating repeating the the the the same basic structure same basic structure same basic structure same basic structure as it is applied repeating repeating repeating repeating the the the the same basic structure same basic structure same basic structure 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. Conditional Areas It is used when one or more conditions applies to conditions applies to conditions applies to conditions applies to a a a a group group group group of of of of pages pages pages pages group group group group of of of of pages pages pages pages es. access permissions an outgoing result is generated if the condition is not fulfilled
18. Flow areas It encloses a sequence of steps sequence of steps sequence of steps sequence of steps that will appear repeatedly in the diagram repeatedly in the diagram es. login procedure They require the two special types of continuation points: entry entry entry entry points and exit exit exit exit points
19. Concurrent Set It is used when a user action generates multiple multiple multiple multiple simultaneous simultaneous simultaneous simultaneous results results results results simultaneous simultaneous simultaneous simultaneous results results results results
20. Decision Point It is used when a user action may generate one of a number of results number of results number of results number of results, and the system must make a number of results number of results number of results number of results, and the system must make a decision decision decision decision about which result is to be presented
21. Conditional Branch It is used is when the system (not based on user action) must select one path among a number of action) must select one path among a number of mutually exclusive mutually exclusive mutually exclusive mutually exclusive options options options options
22. Conditional Selector Same as conditional branch, but paths are paths are paths are paths are not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive
23. Cluster Similar to conditional selector, system allows more more more more than than than than one path one path one path one path for certain for certain for certain for certain conditions conditions conditions conditions than than than than one path one path one path one path for certain for certain for certain for certain conditions conditions conditions conditions
24. Roadmap • Sitemaps • Sitemaps • Wireframes
25. Wireframes • Views + user interaction + navigation
26. Lo-Fi Wireframes A Lo-Fi wireframe is built built built built on the on the on the on the sitemap sitemap sitemap sitemap and has a focus on focus on • the LAYOUT LAYOUT LAYOUT LAYOUT of the views • interaction interaction interaction interaction with elements within the views L L L Low ow ow ow fidelity fidelity fidelity fidelity for preventing confusion of visual design confusion of visual design concepts with information design concepts
27. Hi-Fi Wireframes An Hi-Fi wireframe is a refinement refinement refinement refinement of of of of a a a a lo lo lo lo- - - -fi fi fi fi wireframe wireframe wireframe wireframe with a focus on with a focus on • how each view will appear appear appear appear in in in in details details details details • sensory sensory sensory sensory sensations sensations sensations sensations of the user typography colour palette colour palette textures + everything about the look & feel
28. References http://jjg.net/ia/visvocab Chapter 7