Site Critique Fidelity.com By Brooke Baldwin November 2007.

Slides:



Advertisements
Similar presentations
Support.ebsco.com EBSCOadmin Branding Tutorial. Welcome to the EBSCOadmin Skinning and Branding tutorial, where you will learn how to customize EBSCOhost.
Advertisements

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Chapter 3 – Web Design Tables & Page Layout
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?
Web Page Training Summer 2014 Presented by: Mountain Brook Schools Tech Team.
PRESENTER: MATTHEW DILLON E SCHOOL VIEW CMS TEACHER TRAINING.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
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.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Eere.energy.gov Agenda Review usage trends Recommendations based on data EERE’s plans to address template-level findings Crazy Egg Analysis: Usage Trends.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
Evaluation of Web Sites: What Works and What Doesn't Sue Ellen Hansen, Survey Research Operations, University of Michigan Matthew Richardson, ICPSR, University.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
Tutorial EBSCOadmin Branding support.ebsco.com. To help you enhance the search experience for your users, EBSCO offers a number of custom branding options.
Create a Web Site with Frames
PDFs & Dorsetforyou.com Laura Hall Senior Website Officer
New Features in Release 8.2 (August 3, 2008). 2 Release 8.2 New Features User Interface Updates - Improved “Look and Feel” Product Search Layout Changes.
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
Welcome to Our Website Comments and Suggestions Welcomed! Presented by: Vicky Green.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
® IBM Software Group © 2006 IBM Corporation Creating JSF/EGL Template Pages This section describes how to create.JTPL (Java Template Pages) using the Page.
WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs
Designing for the Web 7 Useful Design Principles.
CHAPTER 14 Formatting a Workbook Part 1. Learning Objectives Format text, numbers, dates, and time Format cells and ranges CMPTR Chapter 14: Formatting.
Scrap Book of Design Critiques by Rohit Maddipudi HF /03/2013 Bentley University 1.
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.
XP 1 HTML: The Language of the Web A Web page is a text file written in a language called Hypertext Markup Language. A markup language is a language that.
Web Technologies Website Development Trade & Industrial Education
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Publishing a Macromedia Flash Movie – Lesson 131 Publishing a Macromedia Flash Movie Lesson 13.
Understanding HTML Code
Website Development with Dreamweaver
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.
An Introduction To Websites With a little of help from “WebPages That Suck.
Cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page:
Project Manager: Lead Designer: Information Architect: Lead Developer: Lakeshia Burnside Myrtle Nurse Ashlei Evans Stacey Jeanpaul Web site Visual Design.
Support Training Module. Support Manual 1.“On The Lot” – How it all works… 2.Craigslist Settings 3.Post to Craigslist 4.Backpage Settings 5.Post to Backpage.
PBA Front-End Programming Page Composition. Page composition Now we know about – Colors – Fonts, texts and editorial style – Links and navigation – …
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
Interface Design.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
TEMPLATE DESIGN © Professional Template for a 24x36 poster presentation Your name and the names of the people who have.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Lesson 8: Navigation. Overview  The manner in which you display your web site’s navigation is crucial to its overall usability.  Users need a clear.
TABLE OF CONTENTS 2014 BasmahAlQadheeb. What is a report? A report is a clearly structured document that presents information as clearly as possible.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Heather Mathieson Megan McKeever. 1. Register / Log In is not visually prominent 2. Presentation lacks visual control 3. Scrolling list is difficult.
By: Jonathan Sobczynski. Importance of Homepages A Homepage is the company’s “Face to the World” Most important page on a Website.
Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.
The purpose of conducting a Comparative Analysis is to compare the BK Farmyards website to competing websites and to websites with inspirational functionality.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Avaya.com Usability Test Findings and Recommendations March 22, 2002 Steve Ellis - Avaya.
{ User Centered Design Final Presentation Donia Canaveral }
Tables: Basic Elements Header 1Header 2Header 3 Row 1, Column 1Row 1, Column 2Row 1, Column 3 Row 2, Column 1Row 2, Column 2Row 2, Column 3 Row 3, Column.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Creating a Google Site For a Digital Portfolio Purpose.
EKTRON QUICK START GUIDEEKTRON QUICK START GUIDE Version 1.0 Copyright 2013 WebSolutions Technology, Inc. Fuller June 7, 2013.
TEMPLATE DESIGN © Professional Template for a 36x48 poster presentation Your name and the names of the people who have.
Page Design in Canvas.
Professional Template for a 36x48 poster presentation
Fixed Positioning.
Formatting a Workbook Part 1
Professional Template for a 36x48 poster presentation
Professional Template for a 36x48 poster presentation
Presentation transcript:

Site Critique Fidelity.com By Brooke Baldwin November 2007

2 Table of Contents Homepage Homepage Center Content Global Navigation Login Page Layout Executing a Task Summary Appendix

3 Relatively simple design layout with like material grouped together. Most relevant information displayed above the fold (disclaimers below.)

4 From a users perspective Fidelity hasnt done a great job here of differentiating between Accounts & Trade, Investment Products, and Retirement & Guidance. The only way for a user to learn more about each area of the site is to click on the link. This incorrectly assumes users know what task they wish to accomplish and may deter users from their goal and add confusion to the topic of personal finance for novice users. The homepage global navigation could be improved by clarifying the verbiage and adding descriptive text to the onmouseover behavior (this would also help visual readers for impaired users). The quotes and search boxes are redundant; an advanced search link should be provided instead. The Contact Us button is not clear enough nor distinct enough from the Customer Service link directly below. These elements should be consolidated and differentiated from the finance related navigation.

5 The main section of the homepage is dedicated to marketing the brand and advertising their value proposition to perspective users. Fidelity.com has given higher (and thus better) placement of relevant links to reach out to the largest existing user population. This is demonstrated by the order that they offer services and information. Meaning, the most valuable places on the center part of the screen are geared towards the biggest user group.

6 Users get the best of both worlds with this login section. Novice users can login to a general landing page of their accounts and power users can log into a specific area of the site. For applications that service power users this can be an effective way to bypass layers of navigation and meet the needs of users as they become more knowledgeable about the subject matter.

7 These problems can be resolved by developing either a 4-column or 3-column layout (but not both), standardizing placement and labeling of elements, improve consistency of fonts (size, bold vs. non-bold, and color), and designating a color palette and what order of importance is placed with each color (primary, secondary, tertiary). One glaring weakness of the site is the deviation from a standard look and feel. The user is not provided with consistency so with each new area the user is forced to reevaluate where the most important information is located, if colors signify new or different meaning and that does not provide a unified experience. While these deviations may be relatively subtle they subvert the overall image of brand.

8 The site makes it very easy to take action on a trade account but again the user is confronted with a non-standard layout and a center section that does not fit within the pixel width of the existing page layout nor the screen. And while some of the actions are verb-oriented not all options are labeled in a uniform manner. Source code reveals that page uses frames that are not labeled which does not meet 508 Compliance standards.

9 Summary The site provides –Consistent branding –Functionality for both novice and advanced users –Clearly worded explanatory text –Quick response time for server calls The site would be improved by –Consistent and logical page layout –Standard font face and size –Organized color palette –Alternate tags for navigation elements –Removing frames or explicitly labeling frames

10 Appendix Equal ratio of female and male users Average Age – 36 Marital Status - married Household Income (HHI) - $65k and higher Education Level – college degree or higher Amount available for investment - $7000 Little to some knowledge of investing N.B. Assumed for the purpose of this review. Fidelity.com User Demographic