Date 23 rd 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