Www.mimos.my© 2010 MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.

Slides:



Advertisements
Similar presentations
HTML Tags and Their Functions
Advertisements

Chapter 3 – Web Design Tables & Page Layout
And Design recommendations overview for Advisor Portal – workshop out puts Author: Windahl Finnigan JD Williams.
AIMSweb Progress Monitor Online User Training
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Site Modules > Page Builder Access the Page Builder module through the Site Modules top navigation link. Access Page Builder from the Site Modules navigation.
Gateway Program Go to along the left side, in the third section, click on The Gateway.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Access - Project 1 l What Is a Database? –A Collection of Data –Organized in a manner to allow: »Access »Retrieval »Use of That Data.
CIS101 Introduction to Computing Week 07. Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Creating Web Page Forms
Wordpress Tutorial 22 – 24 April Table of Contents Introduction Designing blog Writing and Publishing blog Pages Posts Categories Tags Links Comments.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
Designing a Classroom Web Site Using NVU Beginning Level.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
CHAPTER 14 Formatting a Workbook Part 1. Learning Objectives Format text, numbers, dates, and time Format cells and ranges CMPTR Chapter 14: Formatting.
Wikispaces in Education Tutorial Jennifer Carrier Dorman
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Technologies Website Development Trade & Industrial Education
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Wikispaces Tutorial Adapted from a slideshow by: Jennifer Carrier Dorman
Dr. Hala Fawzi  Make sure you are signed into Wikispaces  Go to: 
Website Development with Dreamweaver
Micro sites Basic training guide. Welcome to your Micro site. Here you can create your own personal page within the Countrywide website. When you first.
ADDITIONAL GUIDELINES. Source: Wroblewski, L (2008) Provide Clear path to completion.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
TATS – View/Update Consultant Profile Department of Health and Human Services Health Resources and Services Administration HIV/AIDS Bureau.
1.Getting Started 2.Modifying Design 3.Page 4.News 5.Events 6.Photo Gallery 7.Newsletter Index Training 15 th Mar., 2011.
CPG 4331 Class Agenda Word  Getting Started  Editing Documents  Changing Views in Documents  Format Text / Format Documents  Work With Tables  Work.
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
1 Lesson 18 Organizing and Enhancing Worksheets Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
1. To start the process, Warehouse Stationery (WSL) will invite you to use The Warehouse Group Supplier Electronic Portal and will send you the link to.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Using Wikis in Education Caroline County Educational Technology Workshop August 1, kispaces.com/
Introduction to Web Page Design. General Design Tips.
Computer Literacy BASICS: A Comprehensive Guide to IC 3, 5 th Edition Lesson 19 Organizing and Enhancing Worksheets 1 Morrison / Wells / Ruffolo.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Wikispaces in Education Tutorial Fatema Kashoob Nawal ALKathiri
© Paradigm Publishing Inc. ACCESS CREATING QUERIES, FORMS, AND REPORTS Section 3.
1. 2 Word Processing Word Processing is writing words and sentences on the computer. It is easy to change or move text in a word document. People use.
EMARS 3.9 Familiarization November Logging In Larger Font No overlap of text and picture.
1 Lesson 13 Organizing and Enhancing Worksheets Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
Some Thoughts On PROTOTYPE Form Design. You may place prompt over or to the left of the data-entry field; select one and be consistent. Name Tom PromptResponse.
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.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Wikispaces in Education Tutorial ESA, Region 2 Mary Teply Marge Hauser.
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
Web Site Development - Process of planning and creating a website.
Microsoft Office 2013 Try It! Chapter 4 Storing Data in Access.
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.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
User Interface Guidelines UI Design team December 15, 2012.
Executive Summary - Human Factors Heuristic Evaluation 04/18/2014.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
Customize Your View of Data Training Presentation for Supply Chain Platform: BAE Systems May 2015.
Invoices and Service Invoices Training Presentation for Raytheon Supply Chain Platform (RSCP) April 2016.
Copyright © 2009 Pearson Education, Inc. Publishing as Prentice Hall. 1 Skills for Success with Microsoft ® Office 2007 PowerPoint Lecture to Accompany.
COMPUTER LITERACY NOTES MS-EXCEL. SPREADSHEETS A spreadsheet is a computer equivalent of a paper ledger sheet. Excel allows you to create spreadsheets.
Journal of Mountain Science (JMS)
Course Objectives After completing this course, you should be able to:
Fixed Positioning.
Unit 14 Website Design HND in Computing and Systems Development
Presentation transcript:

MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation

Failed W3C validator #1 Recommendation: Website MUST use a proper HTML markup and headers. Pages that are well structured follow proper syntax, and pass the W3C validator ( are most accessible. Fault Category: HTML Specification Screen: N/A

Wrong date format MIMOS Berhad. All Rights Reserved. #2 Recommendation: Date format SHOULD have minimal format as below: dd/mm/yyyy -> eg: 23/04/2008 dd-mm-yyyy -> eg: Fault Category: Date and Time Format Screen: All

Copyright and date is not displayed consistently MIMOS Berhad. All Rights Reserved. #3 Recommendation: Move the date to the top right under username display and keep copyright display at every page. Fault Category: Date and Time Format Screen: All

Horizontal scroll bar should not be used MIMOS Berhad. All Rights Reserved. #4 Recommendation: Vertical scrolling is acceptable but the horizontal scrolling MUST NOT be used. Fault Category: Scroll Bars Screen: All

Text length is too long MIMOS Berhad. All Rights Reserved. #5 Recommendation: Length of the text should be acceptable as long as no horizontal scroll bar. Fault Category: Scroll Bars Screen: Help

No MIMOS Logo MIMOS Berhad. All Rights Reserved. #6 Recommendation: Site name or logo SHOULD be on top left corner. Site name or logo SHOULD consistently display on every page to ensure users are fully aware they are on the same website The Site name or logo SHOULD be clickable and always linked to Main Page. Fault Category: Site Name / Logo Screen: All

Table showing results with multiple rows same color MIMOS Berhad. All Rights Reserved. #7 Recommendation: All tables SHOULD have minimum padding size of 3px and spacing SHOULD have minimum of 1px. For tables showing results with row more than one SHOULD give alternate color of maximum of 2. Fault Category: Tables Screen: All

No Page Title MIMOS Berhad. All Rights Reserved. #8 Recommendation: Every site MUST have a page title using tag. Page title format SHOULD be write as follow: ‘Title of this page : Name of the Website’ or ‘Title of this page < Section < Name of the Website’ Fault Category: Page Title Screen: All

Links / Menu Links are not visible to user MIMOS Berhad. All Rights Reserved. #9 Recommendation: All links MUST visible to user and avoid hidden link Links MUST be consistent throughout the page Links SHOULD be different from plain text Links SHOULD be Underlined or used different color All links MUST be labeled properly (brief but descriptive) and avoid using ‘click here’ to label a link. Fault Category: Links Screen: All

No Visual Hierarchy MIMOS Berhad. All Rights Reserved. #10 Recommendation: All heading, navigation menu and content SHOULD have a clear visual hierarchy. Visual hierarchy SHOULD be organized and prioritized by using size, prominence and content relationships. Fault Category: Visual Hierarchy Screen: All

Form not properly aligned MIMOS Berhad. All Rights Reserved. #11 Recommendation: All forms should always contain title - what the form is for. Form structure should always be within one single column. Two columns are allowed only in the case of a big amount of data being constantly referred to. Fault Category: Form Screen: All

Wrong heading title MIMOS Berhad. All Rights Reserved. #12 Recommendation: This should be Register instead of Login Fault Category: Content & Language Screen: Main > register

Primary action button is not highlighted (focus) MIMOS Berhad. All Rights Reserved. #13 Recommendation: Primary & Secondary Actions The visual presentation of actions SHOULD match their action Provide a clear visual distinction between primary & secondary action. Primary action MUST be selected by default. Site SHOULD allow user to navigate across the form in a logical order with the Tab key. Fault Category: Primary & Secondary Actions Tab Index Screen: All

Wrong heading title MIMOS Berhad. All Rights Reserved. #14 Recommendation: This should be Reset Password instead of Login Fault Category: Content & Language Screen: Main > register

Buttons separated too far MIMOS Berhad. All Rights Reserved. #15 Recommendation: Should be located closely together Must align with the text box (either right or left) Fault Category: Visual Clarity Screen: Main > reset password

Wrong heading title MIMOS Berhad. All Rights Reserved. #16 Recommendation: This should be Update Password instead of Login Fault Category: Content & Language Screen: Main > update password

Page title is centered-align MIMOS Berhad. All Rights Reserved. #17 Recommendation: Left align the page title should be better Use larger font size for the page title Fault Category: Visual clarity Consistency Screen: Main > Profile manager

The locale select box is not align properly with timezone select box because of the flag icon MIMOS Berhad. All Rights Reserved. #18 Recommendation: The flag should be on the right side of the locale select box Locale select box should be align properly with the timezone select box Fault Category: Visual clarity Screen: Main > Profile manager

No clear visual hierarchy level for the help titles MIMOS Berhad. All Rights Reserved. #19 Recommendation: Should implement content hierarchy level for this page Visual hierarchy SHOULD be organized and prioritized by using size, prominence and content relationships. Fault Category: Visual clarity Screen: Main > Help

No `You are Here` indicator MIMOS Berhad. All Rights Reserved. #20 Recommendation: User should easily know where they are now Indicate the current page using some visual cue (bold font or change color or both) Fault Category: Visual clarity Screen: Main > Upload Workflow

Buttons and other field elements are not aligned properly MIMOS Berhad. All Rights Reserved. #21 Recommendation: All field elements should be aligned properly Fault Category: Visual clarity Screen: Main > upload work flow

No clear border to separate each group elements (columns) MIMOS Berhad. All Rights Reserved. #22 Recommendation: Should have border for user to easily know which element goes to which group Fault Category: Visual clarity Screen: Main > upload work flow

Buttons consumed too much spaces and not aligned properly MIMOS Berhad. All Rights Reserved. #23 Recommendation: Every workflow will have all button, with left aligned. Enable/disable button will be clearly displayed. Fault Category: Visual clarity Screen: Main > workflow monitoring

The icon is not represent download action well enough and novice user would have difficulty to know the icon purpose MIMOS Berhad. All Rights Reserved. #24 Recommendation: Use “Download” button Fault Category: Visual clarity Screen: Main > workflow monitoring

Alert message not coming together with Icon MIMOS Berhad. All Rights Reserved. #25 Recommendation: Confirmation, Error and Status message should come together with icon that could represent the message. Fault Category: Error correction & Prevention Screen: Main > confirm deletion

No visual border for the table and hard to see separation between rows & column for multiple result MIMOS Berhad. All Rights Reserved. #26 Recommendation: Should have thin border line to separate results (rows & column) Alternate background color for the rows is recommended Fault Category: Visual clarity Screen: Main > detail workflow

Buttons are not aligned properly MIMOS Berhad. All Rights Reserved. #27 Recommendation: All field elements should be aligned properly Fault Category: Visual clarity Screen: Main > Certificate management * This issue should be fixed throughout all pages where it repetitively occurred

Required field not tagged with asterisk properly MIMOS Berhad. All Rights Reserved. #28 Recommendation: Required fields should be tagged with red color asterisk The asterisk should be tagged beside the label or the field This issue should be fixed throughout all pages where it repetitively occurred Fault Category: Error Prevention & Correction Screen: Main > Certificate management

The button position is not consistent MIMOS Berhad. All Rights Reserved. #29 Recommendation: Should maintain the button’s position Fault Category: Consistency Screen: Main > Manage Credential

Title (left) and description (right) located too far from each other MIMOS Berhad. All Rights Reserved. #30 Recommendation: Both elements should be located closer between each other Fault Category: Visual Clarity Screen: Main > Certificate details

Insert form is mixed with the record display MIMOS Berhad. All Rights Reserved. #31 Recommendation: Should clearly separate the record display and insert form – more spaces or border. Fault Category: Visual Clarity Screen: Main > add grid resource

Form fields located too far from the submit button MIMOS Berhad. All Rights Reserved. #32 Recommendation: Should locate the fields and the submit button closer together Fault Category: Visual Clarity Screen: Main > Configure setting

Form fields location is not consistent between pages MIMOS Berhad. All Rights Reserved. #33 Recommendation: Should have a consistent way / location to display form – Left Justified This issue should also be considered for other website elements Fault Category: Consistency Screen: Main > Configure setting

Null message MIMOS Berhad. All Rights Reserved. #34 Recommendation: Null message shall be removed. Fault Category: Error Message Screen: All

In-appropriate error and status message and its location MIMOS Berhad. All Rights Reserved. #35 Recommendation: Rephrase the error and status message. Refer to: MIMOS-NGCI-NGP3-WORKFLOW- RAB-USECASE MIMOS-NGCI-NGP3-WORKFLOW- RAB-MESSAGE Fault Category: Error Message Screen: All

THANK YOU MIMOS Berhad. All Rights Reserved.