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

Slides:



Advertisements
Similar presentations
Web Page Design Critical Elements for a Well Designed Web Page.
Advertisements

Chapter 11 Designing the User Interface
MICHAEL MARINO CSC 101 Whats New in Office Office Live Workspace 3 new things about Office Live Workspace are: Anywhere Access Store Microsoft.
Microsoft ® Office Access ® 2007 Training Build a database VI: Create reports for a new Access database ICT Staff Development presents:
USING WORDPRESS. WEEK 1 1.Why WP? 2.Setting Up WP 3.Exploring the Admin screen 4.Page Organization 5.Posting 6.Polls.
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
Beyond “The System Shall...” A Journey from Good to Great Requirements.
GENERAL USABILITY CONSIDERATIONS. Overview of usability Aspects of usability – Learnability, memorability, efficiency, error reduction Techniques for.
WASTE MANAGEMENT ©2010 SciQuest USA Confidential 1 Powered by RFx User Guide.
© 2010 Bennett, McRobb and Farmer1 Use Case Description Supplementary material to support Bennett, McRobb and Farmer: Object Oriented Systems Analysis.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
Microsoft Visio is diagramming software for Microsoft Windows. It uses vector graphics to create diagrams. The 2007 Standard and Professional editions.
Cambodia-India Entrepreneurship Development Centre - : :.... :-:-
Chapter 13: Designing the User Interface
Information Architecture Donna Maurer Usability Specialist.
Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.
CS-499G 8/17/ Design Concepts and Principles.
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
Michael Atkins. Note:  This is a non-technical overview  Some light technical background is given, to put things in context  Some of the content is.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Business Processes and Workflow How to go from idea to implementation
LAYING OUT THE FOUNDATIONS. OUTLINE Analyze the project from a technical point of view Analyze and choose the architecture for your application Decide.
Presented by Chad Kafka This Month’s Topic: Wikispaces Advanced Today’s session is an introduction to what a WIKI is and how they can be used in education.
ORGANIZING THE CONTENT INFORMATION ARCHITECTURE AND APPLICATION STRUCTURE September 11 th, 2009.
Large Corporation Web Sites Efficient process Maximum effectiveness.
– Strategies for Effective Navigation Design & Prototype Phases.
Information Architecture The science of figuring out what you want your Web site to do and then constructing a blueprint before you dive in and put the.
Moodle (Course Management Systems). Assignments 1 Assignments are a refreshingly simple method for collecting student work. They are a simple and flexible.
Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,
Where USERS Make the Difference! Peer to Peer | Greater Scale | More Voices | Faster How to Personalize the Role Tailored Client – What you.
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
E-commerce usability guide provides guidelines and advice for implementing easy to use e-commerce websites. It focuses on online catalog/selling functionality.
Company Confidential Info Exchange Workflow Examples for External Users: Submittals Company Confidential.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
Contact Manager / Client Connect. Contacts vs. Prospects? LPS Real Estate Group2 Formerly in Paragon 4, Contacts where either a general contact or considered.
Office of Educational Technology School District of Philadelphia Introduction to Sites Google Sites This presentation is available at
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
To navigate ● To steer or manage ● Generally a ship or an airplane ● To choose a path of travel over the Web. ● Navigation: choose a path through a website's.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
New Ideas for IA Readings review - How to manage the process Content Management Process Management - New ideas in design Information Objects Content Genres.
Why Design Tips for Sakai? Small teams in higher ed means wearing many hats Not all teams have designers Meant to be a primer for developers doing design.
UCD at PeopleSoft | Jeff English & Scott Robinson | User Experience, Supply Chain Management UCD at PeopleSoft ISE 298 Professional Seminar San Jose State.
Confidential and Proprietary © 2007 Blast Radius Inc. IA for Rich Interaction: Tools and Techniques from the Trenches Anthony Hempell | Manager, Usability.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
Large Corporation Web Sites Efficient process Maximum effectiveness.
Windows User Interface and Web User Interface By E. Marlene Graham.
What is Web Site Administration Tool ? WAT Allow you to Configure Web Site With Simple Interface –Manage Users –Manage Roles –Manage Access Rules.
General “Search” or “Find” vs “Manage” “Edit” has no second level tab. is always under the “Create” tab “Create” or “Add” – need consistency Clickable.
Build a database V: Create forms for a new Access database Overview: A window into your data So far in this series of courses, you’ve built tables, relationships,
Working Wiki-ly An Information Tool for the Global Marketing Team April 18, 2012.
Internal and Confidential Cognos CoE COGNOS 8 – Event Studio.
Build a database VI: Create reports for a new Access database Overview: Help others understand your data Previous courses in this series showed you how.
Staff Module and Summary of Changes 1. Icon Changes: Page 3 Signing In and Password/Pin Changes: Page 4 Logging Out: Page 8 Staff Module Changes: Page.
Walking with Wiki Presentation: Cameron Janzen. Overview What is a Wiki? What is the purpose? Example work Getting started – three main steps Creating.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Oman College of Management and Technology Course – MM Topic 7 Production and Distribution of Multimedia Titles CS/MIS Department.
Staff Module and Summary of Changes 1. Icon Changes: Page 3 Signing In and Password/Pin Changes: Page 4 Logging Out: Page 8 Staff Module Changes: Page.
Information Architecture & Design Week 9 Schedule - Web Research Papers Due Now - Questions about Metaphors and Icons with Labels - Design 2- the Web -
Executive Summary - Human Factors Heuristic Evaluation 04/18/2014.
Avaya.com Usability Test Findings and Recommendations March 22, 2002 Steve Ellis - Avaya.
Information Architecture. Information architecture  Information architecture is the science — some would insist art — of defining the design of organization.
Downloading the App 1 Go to the right store. Access the App Store on iOS devices, the Play Store on Android, and for a.
Web Content Development Dr. Komlodi Class 11: Blueprints.
© 2011 DigitalDay | MOBILE WEB INFORMATION ARCHITECTURE Best Practices Workshop 1.
Imran Hussain University of Management and Technology (UMT)
Designing Information Systems Notes
Getting to the Peak: A Mountaineer's Guide to Building Custom Forms with Delivered 9.2 Tools Paul Taylor July 18, 2018.
2/24/2019 6:15 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN.
Don’t make me think Usability.
Presentation transcript:

Structure and Function: IA for Web Applications

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content In a content-only site, the user interface is easy, the information architecture is hard Lots of things topics with different sub-structures grows, hard to know how it’s going to expand but it’s understood

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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 4 How is UI different on the web? Supports more tasks at once lots of domain-specific tools, not one general purpose tool Supports different tasks shopping, communication, decision-making Combines traditional tasks with more things

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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 structure Navigation Other Basic Advice

Teams and Collaboration

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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 interaction Collaborate on: information display page layout navigation

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Different Audiences, Different Goals

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 13 Same questions, different answers Frequency of use all day, every day Level of domain expertise often deep Language jargon is extensive and important How optional is it, what happens if it fails not very - either it’s important or they are forced

Common Challenges

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 16 Information limits task If the user can’t enter it here, it can’t be chosen, searched on

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 17 Information affects understanding The 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 18 Information affects understanding

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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 short On a web app, users WANT to stay on task

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 20 Keeping users in a task sequence navigation with collapsed global nav- MetaDesign

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 21 Navigating between tasks Some tasks need instant access at all times need to understand the user’s day and mix of responsibilities Some tasks are related and grouped need to know the user’s more general intention to decide connections between tasks Tasks are less likely to expand than lists of things horizontal navigation often works

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 22 Navigating between tasks Switch between sourcing, buying, and looking for partners Switch active orders and adding new ones, rarely

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 24 Flexible navigation Buyer has a different navigation than the agent

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 26 Navigating tasks and sub-tasks Effective use of pop-ups helps support sub-tasks -MetaDesign

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 28 List of things with actions attached Look for a thing, then choose a task

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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 or on that workbench

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 30 Maintaining tasks over time Workbenches monitor and provides access

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Basic Advice

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 34 Wallow in the information Things, attributes, and relationships have a huge impact Things define tasks Tasks determine things

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 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

Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 36 Is this information architecture?