Mobile Information Architecture Mobile Information Architecture n A

Mobile Information Architecture

Mobile Information Architecture n A well designed Information Architecture (IA) leads to a truly successful Mobile product. n Mobile Information Architecture (MIA) defines q How the information is structured q How people interact with the information

Information Architecture n IA is defined as q q The structural design of shared information environments The combination of organizations, labeling, search , and navigation systems within websites and intranet 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.

Several Unique Disciplines n Information Architecture: q n The organization of data within an informational space. Interaction Design : q The design of how the user can participate with the information present, either a direct or indirect way n Information Design: q n Navigation Design: q n The visual layout of information The words used to describe information spaces Interface Design: q The design of the visual paradigms used to create action or understanding

The Elements of User Experience

Mobile Information Architecture n The mobile industry – like software – has only a handful of specialized mobile information architects. n It is required to display on a smaller screen as much information as would on a desktop n The role of a mobile information architect would be to interpret this content to the mobile context

Comparing a web site In desktop and mobile browsers

n When starting to create a mobile information architecture, the following questions are to be asked: q Do the same structure, or sections is used? q Do the same information above the fold is presented? q If so, how should that be prioritized? q How does the user navigate to other areas? q Do same visual and interaction paradigms are used, or invent new ones? q And if new paradigms were started to be invented, will the users expected visual characteristics be lost?

Several ways of interpreting a website for mobile context

Keeping it Simple n Mobile Information Architecture must be kept as simple as possible. Support the defined goals q Any idea without definite goals may be dropped. q Ask basic questions like: what need does my application fill? What are people trying to do here? What is their primary goal?

Clear, simple labels n Use good trigger labels. n Keep all the labels short and descriptive, and never try to be clever with the words you use to evoke action n Do not introduce branding or marketing n Do not differentiate the product offerings by its label. n use simple, direct terms for navigating around your pages rather than overly clever terms

Site Maps n Site Map – Classic information architecture deliverable n Visually represents the relationships between two contents and provides a map to reach them in information space.

An example Mobile Site Map

Limit opportunities for mistakes q In any website, the risks of making wrong choices by the user, depends upon the primary navigation areas q As there is a chance to click back, if wrong link is clicked, the risks for making the wrong choice are minor q But in mobile, user have to pay for every wrong choice they made, also to download the previous page by clicking back button. q Hence, its better to limit the number of options (links) for mobile

A Bad Mobile Information Architecture with too many links. Designed with desktop users in mind, rather than mobile users.

Confirm the path by teasing content q The information-heavy sites or applications with nested or drill down architectures, forces the user to traverse a long path to get to target page. q But, the MIA should present the information, with limited traverses, thus reducing user’s time & money q This is done by teasing content within each category - that is, providing at least one content item per category

Teasing content to confirm the user’s expectations of the content within

Clickstreams n Clickstream is a term used for q showing the behavior on websites, q displaying the order in which users travel through a site’s information architecture, n Based on data gathered from server logs n Usually historical, used to see the flaws in the IA, using heat-mapping or simple percentages n Clickstreams are created in beginning, not the end

n maps the ideal path the user will take to perform common tasks n Being able to visually lay out the path, users takes, gives a holistic or bird’s-eye view of mobile information architecture n This may be followed by “user” or “process” diagram. Better to avoid this as this leads to unnecessary distractions

An example clickstream for an i. Phone web application

An example process flow diagram

Wireframes n Wireframes are a way to lay out information on the page, also referred to as information design n Shows how the user will directly interact with the content in informational space. n Serves to make the information space tangible and useful n Also serves to separate layout from visual

An example of an i. Phone web application wireframe

n Helps in the following q How to lay out the navigation? q What visual or interaction metaphors will be used to evoke action? q What are the best ways to communicate and show information in the assumed context of the user? n Challenge: Wireframe does not describes how the interactions will work n These interactions can include copious amounts of annotation, describing each content area

Using annotations to indicate the desired interactions of the site or application

Prototyping n Prototypes communicate more complex interactions of mobile experiences Paper Prototypes q most basic level: taking our printed-out wireframes or even drawings of our interface q Create a basic script of tasks & ask users to perform them, pointing to what they would do

q Instead of full sheets of paper; try using small blank note cards, and for lower-end devices, use business card-sized paper A paper prototype, where the interaction is nothing more than drawings on note cards

A touch interface paper prototype next to its smaller sibling

Context Prototypes q Take a higher-end device that enables you to load full-screen images and start looking your interface in the various contexts An example of a context prototype, or taking images loaded onto a device and testing them in the mobile context

HTML Prototypes q XHTML, CSS, and Java. Script are used to create a lightweight, semi functional static prototype q Uses static dummy content and data. Time consuming An XHTML prototype that you can actually interact with on real mobile devices

Different Information Architecture for Different Devices n Mobile wireframes can range from the very basic to the complex, Depending on the devices to be supported n But, the motivations, goals, and interaction are the same at the low end and high-end device n learn a lot from designing for the lower end first

The Design Myth n users appreciate good design, but quickly indifferent about the visual aesthetic and move immediately to the layout (information design) n The colors used, square or rounded corners, or, gradients or flat backgrounds, helps build first impressions n but it doesn’t do too much to improve the user’s experience

Comparing visual design to information design of the i. Phone application Tweetie