1. © 2011 DigitalDay | www.Digital-Day.com MOBILE WEB INFORMATION ARCHITECTURE Best Practices Workshop 1

2. © 2011 DigitalDay | www.Digital-Day.com Mobile web information architecture What is I/A? Responsive design trigger points Site mapping & mobile wireframing example 2

3. © 2011 DigitalDay | www.Digital-Day.com What is I/A? Information architecture (also known as IA), is the foundation of your online product – for all devices and screen sizes. 3

4. © 2011 DigitalDay | www.Digital-Day.com What is information architecture? The structural design of shared information environments The combination of content hierarchy, 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 4 Information Architecture for the World Wide Web Information Architecture for the World Wide Web by Morville and Rosenfeld

5. © 2011 DigitalDay | www.Digital-Day.com The disciplines of information architecture Information architecture: – The organization of data within an informational space. In other words, how the user will get to information or perform tasks within a website or application. Interaction design: – The design of how the user can participate with the information present, either in a direct or indirect way. Meaning, how the user will interact with the website of application to create a more meaningful experience and accomplish her goals. Information design: – The visual layout of information or how the user will assess meaning and direction given the information presented to him. Navigation design: – The words used to describe information spaces; the labels or triggers used to tell the users what something is and to establish the expectation of what they will find. Interface design: – The design of the visual paradigms used to create action or understanding. 5 MobileDesign.org

6. © 2011 DigitalDay | www.Digital-Day.com What is a wireframe? A wireframe is a visualization tool for presenting proposed navigation, functions, structure, and content hierarchy of a web page or website. A wireframe is NOT a line drawing (or design). It does NOT dictate exactly where (and how) functionality and content is located and displayed on a web page or website. A wireframe is to be followed and INTERPRETED by a graphic UI designer as a blueprint. 6

7. © 2011 DigitalDay | www.Digital-Day.com How a wireframe translates to design 7

8. © 2011 DigitalDay | www.Digital-Day.com Wireframe tools Tools range from PPT to Photoshop, software and web applications, free to expensive. These are guidelines, not designs. Goal is to accurately depict user interaction points, content, and page hierarchy. 8 Omnigraffle Photoshop Mockingbird Wireframe Sketcher

9. © 2011 DigitalDay | www.Digital-Day.com Start with a site map Site Map = overarching organization of pages and content hierarchy 9

10. © 2011 DigitalDay | www.Digital-Day.com Think content and context Think content first – in the context of the user. Where are they using it? What are they looking for? What do they NEED? 10 Where? = At the mall. What? = The sunglasses my friend just tweeted about. Need? = Where do I buy it?

11. © 2011 DigitalDay | www.Digital-Day.com Focus on function Then think usability – how do we make it easy and intuitive. Focus on Function. 11

12. © 2011 DigitalDay | www.Digital-Day.com Avoid dead ends Don’t lead users to a dead-end. Keep navigation and calls to action in mind. 12

13. © 2011 DigitalDay | www.Digital-Day.com Take advantage of the mobile user interface For mobile, consider the attributes of the technology. How do intuitive actions native to smartphones (swipes, pull downs, taps, holds) affect how you can present content? 13 http://static.lukew.com/TouchGestureGuide.pdf

14. © 2011 DigitalDay | www.Digital-Day.com More collaboration = Better usability Collaborate. Designers, developers, the client – all will have different points of view to refine and focus the usability. 14

15. © 2011 DigitalDay | www.Digital-Day.com Responsive design wireframes 1.Begin with a site map 2.Define the grid structure for each key width trigger points – 1024px (Desktop), – 768px (iPad portrait), – 320px (iPhone portrait), 3.I/A Mobile 1 st 4.Work up to Desktop 15

16. © 2011 DigitalDay | www.Digital-Day.com Trigger points – structural wireframe 16

17. © 2011 DigitalDay | www.Digital-Day.com Grid Structure A 17 4 Column Desktop 3 Column Tablet 1 Column Smart Phone

18. © 2011 DigitalDay | www.Digital-Day.com Grid Structure B 18 5 Column Desktop 3 Column Tablet 2 Column Smart Phone

19. © 2011 DigitalDay | www.Digital-Day.com I/A mobile first 19

20. © 2011 DigitalDay | www.Digital-Day.com Move up to tablet 20

21. © 2011 DigitalDay | www.Digital-Day.com I/A desktop last 21

22. © 2011 DigitalDay | www.Digital-Day.com Wireframe review 1.Review wireframes with design and development teams 2.Iterate 3.Review 4.Iterate 5.Design 22

23. © 2011 DigitalDay | www.Digital-Day.com Resources & references http://mobiledesign.org/mobile_design 23