Lecture ppt

1. Mattu universitydepartment of educational technologyInformation Architecture For The Webby: Milkesa DejeneTitle: From Box To Page Chapter Seven, From Box to Page

2. Outline Of Presentation • Introduction • Linking The Chain • Focus The Page On The User’s Primary Task: Navigation Page ,Consumption Page, Interaction Page • Design Gumbo(mixing Page Types) • Match Discrete Tasks To Discrete Pages • Group Like Tasks Together:Wizards, Control Panels, and Toolbars • When A Box Doesn’t Need A Page • Document Site Structure With A Site Map • Site Map Layout • Site Map Vocabulary • Conclusion • Reference Chapter Seven, From Box to Page

3. Introduction • Much of information architecture deals with the abstract. • You have user and business needs that tell you everyone’s goals. • Scenario and task analysis tell you what happens and in what order. • Personas tell you who uses the site and even why. • To achieve helping user and making certain the tools balance, a page must do two things: 1. Help the user accomplish one discrete task. 2. Make the next step easy to access. Chapter Seven, From Box to Page

4. Linking The Chain • User tasks are like links in a chain. • And each page on a Web site is like a window that shows only so much of the chain. • Each page on your site needs to help build this chain. 1. Each page should help the user accomplish one discrete primary task. 2. Each page should provide access to the next link(s) in the task chain. • Balancing between the current task and the next step is important. • When you design the page, you are designing a window that shows both a link in the chain, as well as the connected links. • A Web page usually helps users do more than one thing. • Design is about identifying the priority for each task, and using those priorities to make good design decisions. Chapter Seven, From Box to Page

5. Focus The Page On The User’s Primary Task • There are three types of pages on the Web:- 1. Navigation pages help users determine where to find what they want, and give them access to it. 2. Consumption pages allow users to consume content. 3. Interaction pages let users enter and manipulate data. • Each type of page is optimized for a different kind of user task. • Understanding the type of page you need helps you tailor the interface design. • It’s also important to understand when users need to move to a new page, versus staying on an existing page. Chapter Seven, From Box to Page

6. 1. Navigation Page • It exists to send you somewhere else. E.g. New York Times. • If the user’s primary task is to navigate to or find something, then you need a navigation page. • Design navigation pages so they are easy to leave. Chapter Seven, From Box to Page

7. 2.Consumption Page • Consumption pages are the “somewhere else” you usually go to. • These are places where articles are read, videos watched, photos viewed, and mp3s played. • For example news stories, blog posts, today’s weather, YouTube videos, the latest Nick Cave single, recipes, installation instructions, tutorials, wedding photos—things people have spent some energy locating and desperately want. • Sometimes, they consume it with a quick glance. Chapter Seven, From Box to Page

8. 3.Interaction Page • Interaction pages are places where people want to type, drag, slide, push, poke, edit, and delete information. • This can be something as simple as Google’s homepage with one text input, or something as complex as word processing with Google Docs . • Some Web sites need to be easy to use the first time you use them. • Others need to be easy to use the 500th time you use them. E.g. Excel, Photoshop and Visio. Chapter Seven, From Box to Page

9. Design Gumbo(mixing Page Types) • In this day of Web applications it is possible to mix all the three types of pages with rich interfaces. • The page’s design needs to support the user task first and foremost. • Every page on your Web site will fall into one of the above three types. • Like Google Maps, Web pages will always be primarily one of the three types, supporting the one, primary task, with supplementary tools for supplementary tasks in a subservient role. • “There can only be one queen; everybody else is a handmaiden”. Chapter Seven, From Box to Page

10. Match Discrete Tasks To Discrete Pages • When moving from box to page, you should match a user’s tasks with the appropriate page type. • For example, if the user’s task is to choose an article to read, then you need a navigation page. • If you’ve written scenarios or performed a task analysis, you can go down your list of tasks and define them as navigation, consumption, or interaction tasks. • we could then assign a single page to each and every task in this analysis. Chapter Seven, From Box to Page

11. Group Like Tasks Together • We always have to balance clarity with efficiencyin our design. • When deciding how many pages to create for a group of tasks, consider these factors: • The audience’s technical sophistication • The audience’s bandwidth • The amount of information on a page • The task the audience is trying to accomplish • How often the audience will complete the task • In interface design, there are three approaches to grouping interaction tasks: Wizards, Control Panels, and Toolbars. Chapter Seven, From Box to Page

12. 1) wizards: many boxes, many pages • If we make each task a page, this would result in a site with a series. • In software design, a layout with one-step per page is called a wizard. • Wizards are used in the following situations: • When users want to accomplish a goal that has many steps. Wizards are good at making sure you don’t miss a step. • When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way. • When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer. Chapter Seven, From Box to Page

13. Cont’d.. • Wizards are a good choice for Web design under all the conditions previously listed, as well as when the following conditions are present: • The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. • Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls, which would also slow the page’s load. • The task has several steps in it, performed only once a visit, such as checkout. • In applications, wizards are used for one-time situations, such as when a user sets up networking. Chapter Seven, From Box to Page

14. 2) Control Panels: Many Boxes, One Page • Just because your task analysis shows several discrete tasks doesn’t mean you don’t have other choices. • You could also combine all the questions in the Festival Planner onto one page, which would make the section look more like. • A complex layout with many steps on one page is called a control panel. • Control panels are good when wizards are not—when the audience is technically savvy and on a fast download. Chapter Seven, From Box to Page

15. Cont’d… • Control panels are also a good choice when the following conditions are met:- • The application is easy to understand, and the choices are straightforward. • The elements gain context by being placed next to each other. • The interface is used often enough that the audience will appreciate the convenience of a single page. • Control panels are often used in situations in which occasional modification is required, such as configuring a program. Chapter Seven, From Box to Page

16. 3)Toolbars: When The Page Isn’t Enough • There is a third configuration for your interactive elements. • Toolbarskeep the tools for interaction conveniently close to the workspace they affect. • This is useful when frequent modification is required, such as when you are writing or drawing. • Imagine how painful it would be if you had to go to a different page every time you wanted to go from an eraser to a pencil! Chapter Seven, From Box to Page

17. Cont’d… • Use toolbars when:- • Many steps are in the task, and the steps can be done in any order. • Steps need to be undone and redone, as well as just plain done. • The proximity of tools to the workspace is important for the task. • The user’s technology can support the implementation (um, excuse me Ms. Engineer, I have another question for you…). Chapter Seven, From Box to Page

18. Cont’d.. • Although toolbars are common in software, they are not widely used in Web design, mostly because of the technical limitations of older browsers. • More and more toolbars are being used, though, as more applications come to the Web and browsers become more sophisticated . • If you have a group of tasks that can be accomplished in any order at any time, it may make sense to group them together in a toolbar. Chapter Seven, From Box to Page

19. When A Box Doesn’t Need A Page • You have to make similar choices when you design pages for your content organization. • Just because you have a category doesn’t mean it should be a page. • Some levels of a category only exist to provide an explanation of organizational logic. • For example, in faceted classification, you will probably want to label each facet. • But should each label be a page? Chapter Seven, From Box to Page

20. Document Site Structure With A Site Map • The site map documents the pages in a Web site. • It also includes the relationship of the pages to each other, the interaction between pages, and a number of other facts that change from project to project, potentially including which pages have templates, which pages are dynamic, and which pages are user created. • This sounds like a lot to deal with, but you can communicate all of this information with a few boxes and some arrows. Chapter Seven, From Box to Page

21. Cont’d… • When documenting how information is organized, concentrate on presenting the hierarchy and documenting which pages will exist and where. • Show each section of your Web site and any sub-pages inside each section. • the following area s should be considered:- • Access • New content vs. archived • Organized by users vs. organized by site owners • Static vs. dynamic Chapter Seven, From Box to Page

22. Site Map Layout • Site maps can come in several shapes. • The design depends on your project’s needs and your personal inclination as a designer. • When you evaluate which design to go with, consider whether your map will include the following characteristics:- • Shallow or deep • Large or small Chapter Seven, From Box to Page

23. Cont’d… • If you have many sections and pages (large), that means you’ll have to think carefully about how to diagram in order to make the relationships clear. • Some possible site map layout formats include the following: • The tree Map • The comb Map • The Star Map • The tab Map Chapter Seven, From Box to Page

24. Site Map Vocabulary • In addition to aformfor your site map, you’ll need a vocabulary for all the objects in it. • It should be easy to determine at a glance what is what in your map. • For example, you may want to indicate the difference between a Web page, a set of similar pages (such as a section of press releases), or a file that is not a Web page (such as a PowerPoint presentation). • You also may want to note decision points, registration areas, and places for user input. • Reinventing a wheel is not good! Chapter Seven, From Box to Page

25. Cont’d… • The following factors are the minimum vocabulary we use in a site map:- • Page and page stack • File and fi le stack • Decision • Continued • rea and conditional area • Connectors • E-mail Chapter Seven, From Box to Page

26. Cont’d.. • As you create your own, ask yourself these questions: • Do I know what is a page and what isn’t? • Can I understand how a user might move through the Web site? • Do I understand the organization or interaction being diagrammed? • How would I do this better? Chapter Seven, From Box to Page

27. Make The Next Step Accessible • When we design the schedule page, you should do these two things:- • Focus on displaying the user’s customized film schedule. • Help users easily email a copy of the schedule to someone. Chapter Seven, From Box to Page

28. Manage Multiple Next Steps • Flickr has created a consumption page for each photo that’s optimized for viewing. • Instead of one next step, Flickr makes several next steps available : • A user can view the next photo in the set. • A user can browse photos that have the same tag or add tags. • A user can view and edit the photo’s metadata. • A user can read comments or add his own. • And we haven’t even looked at the toolbar above each photo that lets users perform numerous other next steps! Chapter Seven, From Box to Page

29. Cont’d.. • Most pages on the Web accommodate multiple next steps. • There are many different users with many different goals, so pages attempt to make an appropriate next step available to every user. • However, you can’t design a page to please everyone. • You must prioritize your next steps based on three criteria: - 1. How many users will it help? 2. How often will it happen? 3. How important—to users or the business—is this next step? Chapter Seven, From Box to Page

30. Zone Your Page For Interaction • In a city, you zone part of the town for business, part for residential. • On a Web page, you zone part of the page for navigation, part for advertisement, part for content. • In an application, you may zone an area for a toolbar; on a video player, you may zone an area for the controls. • This is so typical that now users will look only in a given zone for a desired control and look no further. • Each zone holds everything related to the zone’s core purpose, and the related tools are easily accessed. Chapter Seven, From Box to Page

31. Breaking Down The Modules • Once you’ve identified your zones, you can figure out which links, text, and functionality needs to be there. • When you find several links are very closely associated in purpose, you can form them into a module. • This module allows you to manipulate your photo, annotating, sharing, printing, or even altering it. • These tools are all links that kick off an interaction with the photo, so they were assembled into one module. Chapter Seven, From Box to Page

32. Document Your Page With Wireframes • After you’ve chosen your pages and arranged everything on them, you can communicate the design with a wireframe. • A wireframe (or page schematic, as it is sometimes called) is a basic outline of an individual page, drawn to indicate the elements of a page, their relationships, and their relative importance. • It’s much like the wireframe a sculptor will make before adding clay, as it gives shape and provides support. Chapter Seven, From Box to Page

33. Cont’d.. • Wireframes serve two functions when designing a Web site. • First, they make an abstract mental picture of a page more concrete. • Second, wireframes work as documentation devices. • In some places, the information architecture is completed separately from design or development. • In these situations, a wireframe has to capture all of the decisions you’ve made with the team for the design and information architecture. Chapter Seven, From Box to Page

34. Cont’d.. • For each element in your wireframe, it’s important to consider several questions:- • Where does the content come from? • What is the nature of the content? • Is the element required or optional? • Is the element conditional? • What’s the default or expected state? • What are the alternate or error states? Chapter Seven, From Box to Page

35. Conclusion • On the Web, the “page” is a fundamental organizing principle. • When designing your site, every page must serve its purpose, as well as supporting all the related goals. • Zonethe page to give space to the main goal and keep the related activities available yet manageable. • Use reusable modules in order to simplify both creation and understanding of the interface. • document everything so that all your crazy ideas can be vetted by your entire team. • The page is the interface between the user and the company, and getting it right can be the difference between that person wanting to have anything to do with your company ever again...or not. • Take your time, and put your best (inter)face forward. Chapter Seven, From Box to Page

36. Reference • Govella, A. (2009). Information Architecture: Blueprints for the web. New Riders. Chapter Seven, From Box to Page