Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient,...

36
Structure and Function: IA for Web Applications

description

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 3 Function - UI for applications For desktop applications, the information architecture is easy the user interface is hard lot’s of different actions a user can take they interfere with each other effect of actions needs to be clear to the user but it’s understood

Transcript of Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient,...

Page 1: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Structure and Function:IA for Web Applications

Page 2: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 2

Structure - IA with content

• In a content-only site, the user interface is easy, • the information architecture is hard

Lots of thingstopics with different sub-structuresgrows, hard to know how it’s going to expand

• but it’s understood

Page 3: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 3

Function - UI for applications

• For desktop applications, the information architecture is easy

• the user interface is hardlot’s of different actions a user can takethey interfere with each othereffect of actions needs to be clear to the user

• but it’s understood

Page 4: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 4

How is UI different on the web?

• Supports more tasks at oncelots of domain-specific tools, not one general purpose tool

• Supports different tasksshopping, communication, decision-making

• Combines traditional tasks with more things

Page 5: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 5

Typical Web applications

• Shopping, for simple and complex products• Decision-making• Auctions and marketplaces• Verticals - applications embedded in portals• Process tracking, workflow, negotiations• Status tracking

Page 6: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 6

Structure of this talk

• Team structure for these projects• How users and their intentions are different• Common IA challenges in a Web application

Object structureNavigationOther

• Basic Advice

Page 7: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Teams and Collaboration

Page 8: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 8

User Interface Designers

• Design the task flow, and thus the page flow• Design page-level interaction• Bring a lot of knowledge about human-computer

interactionCollaborate on:• information display• page layout• navigation

Page 9: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 9

Are you being a UI Designer?

Are you:• choosing where to put info and buttons on a page• deciding when to show users info and when not• designing task flow

• If so, learn the user interface domain as well

Page 10: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 10

Building a team

• Typical design team:UI Designer, Information Architect, Visual Designer

• Useful people:Ethnographer, technical writer, usability tester

• Be flexible in ownership of tasks• Be collaborative in the design process• Be clear about inputs and outputs

Page 11: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Different Audiences, Different Goals

Page 12: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 12

Who are the users?

• People at work• Trying to make money• Trying to save money• Users often aren’t the people who buy the system• People at home doing something important

Page 13: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 13

Same questions, different answers• Frequency of use

all day, every day

• Level of domain expertiseoften deep

• Languagejargon is extensive and important

• How optional is it, what happens if it failsnot very - either it’s important or they are forced

Page 14: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Common Challenges

Page 15: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 15

Information limits task

Structure of things and their attributes sets what is possible

• IA needs to see how the info interacts, flexes• Know what users should change, when, why• Guess what tasks the information allows that haven’t

been thought of• Overlaps with a DBA role

Page 16: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 16

Information limits task

If the user can’t enter it here, it can’t be chosen, searched on

Page 17: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 17

Information affects understandingThe user’s mental model is made of things, their

attributes, and what can be done to them• Make relationships between attributes sensible, obvious• Know what attributes will be compared in trade-off

decisions• Have the UI surface interaction between attributes, the

effects of actions

Page 18: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 18

Information affects understanding

Page 19: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 19

Keeping users in a task

Ubiquitous navigation increases the chance for mistaken moves

• Collapse general navigation• use sequence nav• Avoid related links on the pages for a task• Use pop-ups for honest side tasks• Try to make tasks shortOn a web app, users WANT to stay on task

Page 20: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 20

Keeping users in a task

sequence navigation with collapsed global nav- MetaDesign

Page 21: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 21

Navigating between tasks

• Some tasks need instant access at all timesneed to understand the user’s day and mix of responsibilities

• Some tasks are related and groupedneed to know the user’s more general intention to decide connections between tasks

• Tasks are less likely to expand than lists of thingshorizontal navigation often works

Page 22: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 22

Navigating between tasks

Switch between sourcing, buying, and looking for partners

Switch active orders and adding new ones, rarely email

Page 23: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 23

Flexible navigation

Different situations demand different navigation• Looking for a task vs. completing a task• finding a thing vs. finding a task• different users, with different roles and permissions

• Some of this is in the “global nav”, some is an issue of links that appear or don’t appear

Page 24: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 24

Flexible navigation

Buyer has a different navigation than the agent

Page 25: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 25

Navigating tasks and sub-tasks

• Use pop-ups judiciously• If the sub-tasks are optional, highlight the typical next

step• Design a good multi-level sequence navigation

• This is tied to the UI area of task flow, but determines pages and structure

Page 26: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 26

Navigating tasks and sub-tasks

Effective use of pop-ups helps support sub-tasks-MetaDesign

Page 27: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 27

Look for a thing, then choose a task• The e-tail model, but often have more tasks• Have the right tasks available at the right level in the

object hierarchy• What can I do to a class of objects?• What can I do to one object?• At what point do you have matrix navigation

Page 28: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 28

List of things with actions attached

Look for a thing, then choose a task

Page 29: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 29

Maintaining tasks over time

Many tasks extend over days and weeks• Have workbench for user’s tasks, what they are

responsible for• Display status and provide access, due dates• Notification of events, with email or on that workbench

Page 30: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 30

Maintaining tasks over time

Workbenches monitor and provides access

Page 31: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 31

Searching an application

• Users are looking for how to do a task, not for a piece of info

• Many pages should not be searched at all• Heavy use of meta-tags rather than full text search• Search is often part of a task, not just navigation

Page 32: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Basic Advice

Page 33: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 33

Task-focused research

• Can’t rely on card-sorts• Listening in context is often the only way to find jargon• Different groups of users are different

Collision repair shops differ in how they order parts, who does it, what they call the tasks

Page 34: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 34

Wallow in the information

• Things, attributes, and relationships have a huge impact• Things define tasks• Tasks determine things

Page 35: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 35

Start IA and UI at the same time

• UI (page flow) controls IA below the top level• Both need to learn the same stuff, work on the same

design problems• Knowing the things requires knowing the tasks

Page 36: Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.

Innovate - For What’s Next™©1999 Scient, Proprietary and ConfidentialPage 36

Is this information architecture?