Cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page:

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
AIMSweb Progress Monitor Online User Training
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Navigating Your Website. What is Navigation? Website navigation is what helps visitors find information on your site. Navigation can be images, links,
How to Navigate in PowerPoint © 2006 Purdue University – OnePurdue Project Click Next to continue.
Information Regarding
A Quick Start Guide for: NEW LOOK NEW TOOLS NEW OPPORTUNITIES.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
JSTOR User Services l February 2009 Using the JSTOR Interface User Services, February 2009.
The use of blogs in education. What is a blog education or edublog?  The Wikipedia defines a blog as an edublog is used for teaching or learning environments.
Rowan County Public Library.  Learn how to register for and log into Weebly.  Set up a Weebly sub-domain.  Instill an understanding of Weebly web-
Lawson System Foundation 9.0
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
Mona Baker Information Builders, Inc. Account Support Manager
Quick Reference Guide Welcome TEST USER Version_NSU_ HELP RETIREMENT MANAGER DEMO FEEDBACK.
In the Sandbox Playing with SkillPort 7 for the first time.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
VASP PREPAYMENT SYSTEM Training Module for CLIENTS.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
CMS I – BASIC WEB EDITING INTRODUCTION TO THE CMS Presented By: Rodneikka Scott, MS – Implementation Project Manager Lila Elliott, MA – Manager Client.
Support.ebsco.com EBSCOhost Basic Searching for Academic Libraries Tutorial.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Website Development with Dreamweaver
Targeted Training, LLC. APPLYING STYLES DOWNLOAD FREE TRIAL OF ADOBE CONTRIBUTE ADOBE CONTRIBUTE CONNECTION WIZARD ENTERING EDIT MODE WEB PUBLISHING PROCESS.
OV Copyright © 2007 Element K Content LLC. All rights reserved. Exploring the Excel Environment  Explore the User Interface  Work with the Ribbon.
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Registering to Post Jobs on …. It’s easy to create, edit, remove and reopen job orders using JobNet Business. Simply register to use the system, then.
Office of Educational Technology School District of Philadelphia Introduction to Sites Google Sites This presentation is available at
Instructors begin using McGraw-Hill’s Homework Manager by creating a unique class Web site in the system. The Class Homepage becomes the entry point for.
Online Marketing Messages Description / guideline Ronni Hartvig November 2010.
GSA’s Vendor and Customer Self Service (VCSS). Login to VCSS  To login to VCSS, perform the following steps: 1.Go to the GSA launch page (
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.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
0 eCPIC User Training: Resource Library These training materials are owned by the Federal Government. They can be used or modified only by FESCOM member.
State of Kansas Travel Authorizations Statewide Management, Accounting and Reporting Tool Entering a Travel Authorization Navigation: Employee Self Service.
 Each tab is geared towards a certain activity area.
Chapter 20 Web Design. Copyright © Houghton Mifflin Company. All rights reserved.20 | 2 Chapter overview Gives an introduction to Web design Examines.
User Interface Components Lecture # 5 From: interface-elements.html.
ARMS Advanced Risk Management System User Documentation.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
Slide 1 of 35 Welcome to GSA’s Vendor and Customer Self Service (VCSS) course Section 3: Basic Navigation This presentation is compliant with section 508.
©2013 JPMorgan Chase & Co. Proprietary and Confidential smartdata.gen2 Expense Report Training.
Web Site Development - Process of planning and creating a website.
Copyright © 2010 Verizon Foundation. All Rights Reserved. This document may be reproduced and distributed solely for uses that are both (a) educational.
What’s New in SkillPort 7 for the End User. The Login Page Customize the login page Add your logo, change colors, graphics and welcome text.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
{ User Centered Design Final Presentation Donia Canaveral }
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Together we can build something great FORWARD | 2016 Role Centers and Charting Joanna Broszeit, Dawn Stenbol, Tracie Folscroft Education Track | Boston.
Using the Personal Image Photo Library
**Please view the instructional guide as a slideshow**
Website Flow Professionals login and Registration Profile Settings
Administrator Training
Test Information Distribution Engine (TIDE)
BOLD 2.0 Navigation Help Guide.
Activating your account and navigating through TIDE
Lesson Objectives Lesson Outcomes
Introduction to EBSCOhost
Activating Your Account and Navigating Through TIDE
For use on your feedback page
EBSCOhost Advanced Search Guided Style
Presentation transcript:

cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page: 26 may 2009 | v1.0 live demo | content page: live demo | logged in:

content page | user not logged in complete © Copyright Rob Cowie 2009

content page elements © Copyright Rob Cowie 2009 element 1 breadcrumb navigation bar description: navigation item which also informs the visitor of their location on the site -visitor always aware of their current location on the site -hyperlinked so that visitor can return to previously visited pages

content page elements © Copyright Rob Cowie 2009 element 2 related quicklinks menu description: left-hand navigation bar which is dynamically populated to present links to other areas of the site which contain content related to the current content page -assists visitors by helpfully presenting links to related content -provides CIPRO with the ability to channel visitors to selected areas of the site

content page elements © Copyright Rob Cowie 2009 element 3 login or register portlet description: portlet that enables a visitor to log in if already registered, or to register -easy to log in if already registered -if user not registered, clicks ‘register now’ and the fields below change for registration -centralised, prominent area for all visitors – registered or non-registered

content page elements © Copyright Rob Cowie 2009 element 4 main content area description: the area of the page that displays the relevant content -mini header clearly displays content header – leading on from the breadcrumb trail -toolbar contains useful functions such as accessibility, download and print tools -text area expands vertically based on amount of content -clear layout with headers and boxes highlighting important content image on next page

© Copyright Rob Cowie 2009

content page | user logged in complete © Copyright Rob Cowie 2009

content page elements © Copyright Rob Cowie 2009 element 5 logged in user control panel description: when logged in, the breadcrumb navigation bar displays extra options for the registered user – a welcome note, access to account settings and a log out button -provides user with easy access to account functions

content page elements © Copyright Rob Cowie 2009 element 6 secure messaging inbox portlet description: the portlet displays the latest messages from CIPRO to the user with a link to display all messages -prominently displays important messages to the user

content page elements © Copyright Rob Cowie 2009 element 7 logged in content example description: the following example shows the flow and visual elements of a four step company registration process. elements include: prominent buttons including the functionality to go back one step informational rollovers display useful information for various fields on mouse-over a visual progress bar clearly displaying the steps involved and progress made - previous steps can be clicked to return

content page elements | element 7 step 01 © Copyright Rob Cowie 2009

content page elements | element 7 step 02 © Copyright Rob Cowie 2009

content page elements | element 7 step 03 © Copyright Rob Cowie 2009

content page elements | element 7 step 04 © Copyright Rob Cowie 2009