Information Architecture & UI Design
Upcoming SlideShare
Loading in...5
×
 

Information Architecture & UI Design

on

  • 1,268 views

Mobile Applications Development - Lecture 4 ...

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

Statistics

Views

Total Views
1,268
Views on SlideShare
1,268
Embed Views
0

Actions

Likes
2
Downloads
102
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Information Architecture & UI Design Information Architecture & UI Design Presentation Transcript

  • Notations forInformation Architecture & UI Design Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
  • 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 Jesse James Garrett he coined the term Ajax by the way Ajax,
  • 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 details buttons, checkboxes, pictures, etc… are defined here, they are part of wireframes
  • 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
  • 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
  • Conceptual modelThe system presents the user with pathsThe user moves along these paths through actionsThese actions then cause the system to generate results
  • 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
  • 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
  • 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
  • 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
  • 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 window having some unique design treatment
  • 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
  • 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
  • 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
  • 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 results, decision about which result is to be presented
  • Conditional BranchIt is used is when the system (not based on user action) must select one path among a number of mutually exclusive options
  • 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 with elements within the views Low fidelity for preventing confusion of visual design concepts with information design concepts
  • 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
  • References http://jjg.net/ia/visvocabChapter 7