Date 23rd Jan

Shatin 沙田

Mobile Information Architecture

• Information architecture defines not just how your information will be structured, but also how people will interact with it

• The structural design of shared information environments

• The combination of organizations, labeling, search and navigation systems within websites and intranets

• The art and science of shaping information products and experiences to support usability and findability

• An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape

Information architecture

Element of User Experience

• Visual Design: visual treatment of text, graphic page elements and navigational components

• Navigation Design: Design of interface elements to facilitate the user’s government through the information architecture

• Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

• Information Architecture: structural design of the information space to facilitate intuitive access to content

• Content Requirements: definition of content elements required in the site in order to meet user needs

• User Needs: externally derived goals for the site, identified through user research, ethno/techno/psychographics, etc

• Site Objects: Business, creative or other internally derived goals for the site

Information-oriented

Elements of User Experience (Web as hypertext system)

• Visual Design: graphic treatment of interface elements (the “look” in “look-and-feel”)

• Interface Design: as in traditional HCI:design of interface elements to facilitate user interaction with functionality

• Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

• Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality

• Functional Specifications: “deature set”: detailed descriptions of functionality the site myust include in order to meet user needs

• User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc

• Site Objectives: business, creative, or other internally derived goals for the site

Task-oriented

Elements of User Experience (Web as software interface)

• Keeping it Simple• Site Maps• Clickstreams• Wireframes• Prototyping

Mobile Information architecture

• Keep it as simple as possible• Support your defined goals• Clear and simple labels

Mobile Information architecture – Keeping it Simple

• The first deliverable to define mobile information architecture

• Visually represent the relationship of content to other content and provide a map for how the user will travel through the informational space

Mobile Information architecture – Site Maps

• Limit opportunities for mistakes• In mobile, users have limited time to perform

a task and cannot assume that the users have access to a reliable broadband connection that allow them to quickly go back

• Confirm the path by teasing content• Providing at least one content item per

category• Create a drill-down path for the user to

browse• Take the most popular item as the first item

Mobile Information architecture – Mobile Site Maps

• Showing the behavior on websites• Display the order in which users travel through

a site’s information architecture• Usually historical, used to see the flaws in your

information architecture

Mobile Information architecture –Clickstreams

• Wireframes are a way to lay out information on the page

• Referred to as information design• Show how the user will directly interact with it• Purpose is not just to provide a visual for our site

map• Also serve to separate layout from visual design• Defining how the user will interact with the

experience• Use wireframes as the key deliverable, that turns

good ideas into excellent mobile products

Mobile Information architecture – Wireframes

• Wireframes lack the capability to communicate more complex

• Prototypes can help• Some view them as redundant or too time-

consuming

Mobile Information architecture –Prototyping

• The most basic level• Taking the printed-out wireframes or draw the

interface• Create a basic script of tasks• Ask users to perform them• You act as the device, changing the screens for them• Try to cut the paper as the mobile size

Mobile Information architecture – Paper Prototyping

• The next step is creating a context prototype

• Take the wireframes or sketches and load them onto the devices

• Sized to fill the device screen• Traveling around and pull our the device

and start looking the interface in the various contexts

• Write down the different thinking about your physical behavior while using the interface

Mobile Information architecture – Context prototype

• The third step is creating a lightweight, semi-functional static prototype using XHTML, CSS ad JavaScript

• This is a prototype that you can actually load onto a device

• Produce the nearest experience to the final product

• Static dummy content and data• Can use the device metaphors of navigation,

you can see how much content will really be displayed on screen

Mobile Information architecture – HTML prototype

• Depending on which devices you need to support, mobile wireframes can range from the very basic to the complex

• Don’t think that the higher-end devices with larger screens can incline more interactions, buttons, they may not have license to pack the screen with as much information as you can muster

• When designing both the high-end or lower-end devices, just try and to keep your information architecture as close to each other as possible without sacrificing the user experience

• Simple design is the hardest design

Different Information Architecture for Different Devices

• People don’t respond to the visual aesthetic as much as you might think

• It just build first impression• Doesn’t do much to improve the user’s experience• They quickly indifferent about the visual aesthetic

and move almost immediately to the layout

The Design Myth