FIT1050 Web Fundamentals
Web Information Architecture
Copyright Warning
Copyright By PowCoder代写 加微信 powcoder
Commonwealth of Australia Copyright Act 1968
This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Learning objectives
Understanding Information Architecture
● Information architecture goals
● 4 components of information architecture
● Examples and practical design considerations
Information Architecture Design Methods
● Common approaches and methods
● Understanding users
● Organisation and labelling design methods
● Planning methods
Understanding Information Architecture
The web is an information system
Information Architecture problems are not new:
● A book with no table of contents, no chapters and no index?
● A library without a classification system or a catalogue – books placed at random
on the shelves.
● A supermarket without organised aisles and brands grouped together?
● Computer storage without folders, where every file is stored on the desktop?
Imagine these issues applied to the World Wide Web
● Pages content haphazardly arranged without consistency?
● Random navigation menu systems and no search engines?
IA design helps users find what they need
Brazilian Artists Create Labyrinth Using 250,000 Books, http://www.gettyimages.com/detail/149565757
IA design helps users find what they need
http://www.arngren.net/
Information architecture objectives
● Tasks and needs
● Behaviour and experience Context
● Business goals and constraints
● Available technology and resources Content
● Document and data types
● Existing content vs. future content
● Amount of content
Information architecture components
1. Organisation Systems
○ How information is arranged within groups
○ Relationship structures between information
2. Labelling
○ How information is represented 3. Navigation
○ How users can move between pieces of information
○ How users can look up information
Organisation schemes
Organisation schemes define how information individual items of information are arranged in a sequence to help a person locate information within a set.
Objective and exact organisation is consistently reproducible
● Alphabetical and numerical (a list of books sorted by name)
● Chronological (news articles in order of publishing date and time)
Subjective and inexact organisation are rely on context
● Convenience based on task or audience
● Dynamic based on frequency of access or use
Example: Organisation schemes in navigation
Design subjective organisation rules to to benefit the largest number of target users.
Try to identify in this example:
● Objective organisation
● Subjective organisation
What is the potential impact of organising items incorrectly?
Organisation structures
Organisation structures define navigation relationships between information items.
Sequential Hierarchical Matrix / Network
Example: Sequential organisation structure
The hero slideshow on eBay.com.au arranges slides in a sequential structure, though the inclusion of a pause button offers some additional user control.
Example: Matrix organisation structure
The simple addition of clickable navigation dots in the JBHiFi.com.au provides a secondary option to browse the slideshow as matrix structure.
Design organisation for future extensibility
Structures should be planned to support addition of new content.
Avoid structures that are too broad… …or are items that are nested too deep.
Labelling systems
Labels come in many forms:
● Page titles and section subheadings
● Text and icons used in navigation
● Input field labels and example values
Users will make use of labels to determine if content is worth their time and effort.
A clear label help the user understand:
● Where they are
● What options are available
Labels must provide useful information
Designing useful labels
The web is full of poorly designed navigation labels.
Apply the following guidelines
● Describe purpose or destination accurately
● Describe the purpose concisely
● Use familiar language and avoid jargon
● Consider representing information in multiple
ways (e.g. adding a graphic icon)
● Give a “call to action”
A label should communicate its purpose without relying on surrounding context.
Example: Labelling implementations
Amazon.com.au (top)
● Clear succinct label text
● Several “call-to-action” links
● “Home” link may be confusing in this context ×
Payment form (left)
● Clear field and option labels
● Exemplar placeholders for expiry and CVC
● Recognisable icons for quick recognition
Navigation systems
A well designed and carefully considered navigation system facilitates efficient browsing within a site.
● Primary: Globally accessible from all pages to access main features.
● Secondary: Supports the site with
navigation options specific to the
current page.
● Tertiary: Provides options that
support the a specific tasks with the current page.
Effective homepages are navigation gateways
Example: Navigation structures
Different types of navigation menus have different strengths and weaknesses.
Flat -menu structures
Hierarchical Menus
Mega menus
Collapsible Menus
Avoid “mystery-meat” navigation
http://web.archive.org/web/20150809075951/https://www.bluebell.com/
Search systems
Search is not be a replacement for good organisation, labelling and navigation.
Search can be a great supplemental shortcut if implemented properly:
● Design of search methods
○ Search complexity vs. potential accuracy/inaccuracy
○ Search context (e.g. search entire site or only products?)
● Design of search results
○ Result order and filter controls
○ Highlighting of search terms
○ Term corrections, pagination, etc.
Example: Search design patterns
Exact Search
Parametric Search
Search Parameters
Faceted Search
User-Provided Search Terms
Author/System-Defined Guided Search Facets
Architecture of search results
Website search systems are rarely simple implementations.
● Scope of search – search all site pages or only specific content types?
● Ranking of results
● User-selectable sort order and filtering
● Layout and formatting of result collections
● Design of each search result item
● Number of results to show at once
● Paginated of results or infinite scrolling?
● Search term corrections and further search suggestions
● Additional actions for individual search result item
Information Architecture Design Methods
Before designing an information architecture, you will need to gather information to understand what needs to be designed. This includes information about:
○ Surveys, interviews, direct observation and research
○ Business case, competitor research, practical and technical limitations
○ Inventory of existing content and further research
Personas and scenarios
Personas are fictional representations of potential users of a website.
A carefully-considered persona allows designers to imagine and empathise with the needs of target demographics.
From a persona we can devise possible scenarios (“user stories”) to determine the user requirements of a project.
Content inventory
At the start of a redesign, it helps to know what content a site contains.
● Available content
● Titles of pages
● Types of content
● Size of content
● Location in website
● How content may scale over time
Content can also be audited for quality.
Above: A content inventory can be implemented as a spreadsheet listing different pages and important attributes.
https://xd.adobe.com/ideas/process/information-architecture/ top-5-content-inventory-tips-information-architecture/
Card sorting
After creating a content inventory, physical or digital card sorting can be used to experiment with organisational schemes and structures.
1. Use participants who are representative of the site’s intended target demographics.
2. Write the names of content items on individual cards.
3. Participants define organisation by arranging cards into groups, and labelling the groups.
Tree testing
Proposed content organisation solutions can be evaluated to determine if users are able to locate information easily.
Participants are asked to complete a task in a simulated navigation environment.
● Record successes and failures
● Identify most clicked items
● Track navigation pathways
● Track completion times
https://bananacom.optimalworkshop.com/treejack/bananacom-demo-survey
Sitemapping
A sitemap diagram allows a website’s main areas and organisational structures to be planned as a single overview.
● A site map represents the page hierarchy of a website.
● Consider the parent-child and sibling relationships of pages
Don’t try to represent every navigation path – especially for sites with matrix organisation structures
Wireframing for information architecture
Wireframes and mockups were previously covered in week 4. Remember that a wireframes show page content types and and structure without visual design details.
● Use wireframes to plan your information architecture.
● Use detailed mockups to plan and visualise your visual design.
● Understand technical fundamentals of CSS layout
● Practice using CSS and your web browser to create and modify page layouts.
● Daylight savings time ended in Melbourne on Sunday 3 April.
○ Overseas students please check the current Melbourne local time to ensure
that you attend classes at the right time.
● Participation Milestone 3 takes place in lab class this week
○ Attend lab class and inform your tutor of the site you have chosen to
redesign for Assignment 2.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com