User-Centered Web Development Life Cycle
Lecture notes
Table of Content
♦ Stage 1: Define the Mission of your Web Site and Its Target User Population
♦ Stage 2: Collect the User Requirements for your Web Site
♦ Stage 3: Create and Modify the Conceptual Design of your Web Site
♦ Stage 4: Create and Modify the Physical Design
♦ Stage 5: Perform Web Site Usability Testing
♦ Stage 6: Implement and Market your Web Site
♦ Stage 7: Evaluate and Improve your Web Site
User-Centered Web Development Life Cycle
♦ Stage 1: Define the Mission of your Web Site and Its Target User Population
♦ Stage 2: Collect the User Requirements for your Web Site
♦ Stage 3: Create and Modify the Conceptual Design of your Web Site
♦ Stage 4: Create and Modify the Physical Design
♦ Stage 5: Perform Web Site Usability Testing
♦ Stage 6: Implement and Market your Web Site
♦ Stage 7: Evaluate and Improve your Web Site
Conceptual Design
♦ Plan the content
♣ Determining the Web Content Objects
♦ Organize Web Content Objects
♣ Design Website structure
♦ Design Navigation
Cluster Structure
♦ The cluster structure is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other
Catalog Structure
♦ The catalog structure accommodates electronic shopping. The user can browse or search for items and view specific information about each product on the item pages.
홈페이지(쇼핑몰 입구)
쇼핑랜드
쇼핑랜드 쇼핑랜드
매장 매장 매장 매장 매장 매장
니 니 니 니 니 니 니 니 니 니 니 니
하위이동 상위이동
고정적 상위이동
상대적 상위이동 수평이동
Navigation Design
Web Navigation
♦ Let users know what page they are on, and what type of content they are viewing
♣ Knowing Where Users Are
♥ Where am I?
♦ Let users know where they are in relation to the rest of the site
♣ Knowing Where Users Have Been
♥ How do I get back to where I started?
♣ Knowing Where Users Can Go
♥ Where can I go?
♥ How do I get there?
Creating Usable Navigation
• Provide consistent, easy-to-understand links
• Provide alternatives to the browser’s Back button that lets users return to their starting point
• Topical Navigation
• Audience-Splitting Navigation
• Metaphor Navigation
• Organizational Structure Navigation
• Sitemaps
Organizing and Labeling Navigation Choices
♦ Client Feedback
Limiting Information Overload
• Create manageable information segments
• Control page length
• Use hypertext to connect facts, relationships, and concepts
Search Features
♦ Popular navigational tool for large, complex Web sites
♦ Search process is the same for both large and small-scale sites
♦ Gives visitors much desired flexibility and control
Preparing for Page Design
♦ Entry Pages / Splash Page
♣ Sometimes called tunnel pages
♣ May even consist of a series of pages
♣ Typically one graphic with only one link to the real home or “core” page
♣ Idea is to lure in viewer from there
♥ Provides elements of interest that draws visitors to your Web site
♣ If used, core page should have lots of content and be bookmarked one
♣ Might contain powerful multimedia such as graphics, sound, and movements
♣ Some visitors consider splash pages a nuisance
Preparing for Page Design
♦ Underlying pages
♣ Connects and combines the Web site
♣ Underlying pages should:
♥ Have a look that shows a definite visual connection with the home page and other underlying pages
♥ Clearly display the Web site name
♥ Provide a link to the home page
Content Considerations
♦ Terminology and writing style
♦ Quality of content: revisiting
♣ Accurate
♣ Timely
♣ Grammatically correct
♣ Trustworthy
♣ Believable
♣ When users are acquainted with the structure and navigation, content becomes more important
♦ Identification
♣ Context information: origin of the content, when last updated
♣ Who is sponsoring, copyright, contact inf.
♦ Credibility
Layout Considerations
♦ Cluttered Design
♦ Background Patterns
♦ Grids and Layouts
♦ Font Color
♦ Font Size and Face
♦ Text Spacing
Optimizing a page layout
♦ three main criteria
♣ Initial visibility:
♥ Is all key information visible above the fold so users can see it without scrolling?
♥ This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
♣ Readability:
♥ How easy is it to read the text in various columns, given their allocated width?
♣ Aesthetics:
♥ How good does your page look when the elements are at the proper
Page Size and Information Placement
♦ A well-designed layout creates a sense of balance and order
♦ The initial, visible screen area is extremely valuable space
♦ Place the most critical information above the scroll line
♣ Avoid a cluttered appearance
♦ Establish A Visual Connection
♣ Consistent layout creates unity
♥ Create a consistent look and feel
♥ Inconsistent appearances confuse visitors
♦ Display certain items consistently (in the same place) on all pages
♣ Main navigation bar
♣ Main content area
♣ Auxiliary links
Intranets– Nielsen Norman Group
Lecture notes
Table of Content
♦ 10 Best Intranets of 2014
♦ Intranet Information Architecture (IA) Trends
10 Best Intranets of 2014
♦ Abt Associates, Inc., a global research firm (US)
♦ Air New Zealand, an airline (New Zealand)
♦ Allianz Australia, an insurance company (Australia)
♦ AMP, a wealth-management company (Australia)
♦ International Monetary Fund (IMF), an international financial and economic organization of 188 countries (US)
♦ Mayo Clinic, a not-for-profit group medical practice of physicians, scientists, and researchers (US)
♦ National Geographic, a non-profit scientific institution (US)
♦ Ooredoo, a communications company (Qatar)
10 Best Intranets of 2014
♦ Average years spent creating the Intranet
♦ Average Intranet team size
10 Best Intranets of 2014
♦ Smaller companies are winning
♣ Size: 20~61,000
♦ Average number of employees at winning organization
♣ 2009: 37,500
♣ 2010: 39,100 (excluding Walmart, with its 1.4 million store associates)
♣ 2011: 37,900
♣ 2012: 19,700; 2013: 18,800
♦ An increasing awareness of the business value of facilitating employee communication and knowledge exchange across companies of all sizes
♦ The changing workforce often distributed in many locations and the need to better support them via online media
10 Best Intranets of 2014
♦ Strong feature trends
♣ Carousels
♥ to fit more content in one parcel of homepage real estate,
♥ to settle political disputes in occupying a visible location.
♣ Persistent right rail
♥ Home page: quick access to applications
♥ Article page: Display related links or social elements
♣ Functional footers
♥ feedback links, links to external sites, and search fields
♣ Local search
♣ Megamenus: present but shrinking
♥ menu links
♣ Filmstrip
10 Best Intranets of 2014
♦ Easing Colleagues into the New Design
♣ Change management
♥ communicated with their colleagues
♥ involved them early and throughout the redesign projects
♥ easing the transition to the new design
♦ Planning for Ongoing Success
♣ Governance and Endless Change
Intranet Information Architecture (IA) Trends
♦ Confusion Between Categories
♣ confusing menu labels
♦ reasons for confusion
♣ Unclear naming
♣ Terms are too broad and end up acting as catch-all (e.g., For Employees).
♣ Sections such as How do I… or Tools grow too big.
♣ Different section names on the site lack distinction
♥ Human Resources
♥ Administration & Management may appear in the same menu).
♣ Language is polluted with jargon or branded terms.
Intranet Information Architecture (IA) Trends
♦ navigation category must be
♣ descriptive, specific, and mutually exclusive
♦ Organizing the Intranet by Task or Topic
♣ task-based structures instead of the organizational configuration
♦ common pitfall
♣ difficult-to-scan category names
♣ the most meaningful words don't appear until the end of the label
♣ too many categories can make it difficult
Edition 1 Edition 2 Overall
Average # nav categories 7.7 7.5 7.6
Intranet Information Architecture (IA) Trends
♦ Topics and Labels in Top-Level Navigation
♦ company information (66%)
♦ human-resources information (64%)
♦ news (56%)
♦ Information about departments or divisions (45%)
♦ support services (common needs across organization) (40%)
About the Organization
Human Resources
Information News
Information About
Departments
Support Services About [Company
Name] Human Resources News Departments Services
About Us Benefits & Pay News & Events Organizations Support Services
Intranet Information Architecture (IA) Trends
♦ a consistent navigation experience across site areas
♣ The use of templates and design guidelines
♥ similar look and feel across different pages
♦ highlighting the users’ current location
♣ Breadcrumbs
♥ from a link in an email or a search result
♦ Megamenus
♣ divided into groups of navigation options
♣ making lower-level content more visible to users
♣ improve discoverability
♣ list all links or highlighted the most important pages
Intranet Information Architecture (IA) Trends
Intranet Information Architecture (IA) Trends
♦ cues to users on where they are in the site:
Intranet Information Architecture (IA) Trends
♦ 1. The right side lists the most popular pages in that site area.
Intranet Information Architecture (IA) Trends
Intranet Information Architecture (IA) Trends
♦ Quick Links
♣ navigation shortcuts
♣ descriptive names, such as
♥ Most Popular Pages or Frequently Used Tools
♦ Social Filters
♣ encourage exploration or shortcut
♣ Most Viewed, Trending #tags, Most popular docs, Top stories,
Latest comments, Hot resources, Top FAQs, Commonly Used Forms
♦ Customizable Quick Links
