By:

Mohd Syaheezam Asyraq Bin YaminMIMOS BERHAD

IntroductionMIMOS will be launching iDola, a tablet pc

which targeted for older adults At the moment, there is no product website available A website is needed - a publicity and marketing tool,

information and product details.Objective:

To create a product website that will make iDola more accessible to older people .

Scope : provide guidelines for website design

RationaleEnable access to the product resources available

online.From HFE aspects- Since older adults have physical

and cognitive abilities that may or may not limit their use of, enjoyment of, and success with Web sites,- it is important to consider those issues as well as their expertise with computers and the Web.

Provide interactive demos and other educational material - greater understanding of the products.

Project goalsIdentify common usability and design specific to

older usersExamples of designs/designs elements that work

well and that do not work well

User-centered Design 2 Issues identify :

Designing Readable Text For Adults (Visibility and Legibility)Presenting Information to Older Adults (Accessibility)

Typeface: - use san serif.eg - Helvetica avoid serif, novelty , and display

typefaces Typesize: Use 12 point or 14 point for body text. Typeweight: medium or bold face type Capital and lower case letter : medium or bold

facetype Physical Spacing : Double space all body text. Justification : Left justified text - optimal for older adults. Color : Avoid yellow and blue and green in close proximity -

difficult for some older adults to discriminate. B/ground : font color contrast against BG, avoid pattern

Human Factors ApplicationDesigning Readable Text For Adults

Writing the text :Style : present info in clear ways, use + ve statement

Phrasing: use active voiceSimplicity : use simple languageOrganization: - organize content in standard format

- short sections

Presenting Information to Older AdultsHuman Factors Application

Incorporating Other Media :Illustrations & Photo : use text relevant images only

Animation/Video/Audio: use short segments to reduce download time on older computer

Text Alternative : static text version for A/V/Audio

Presenting Information to Older AdultsHuman Factors Application

Increasing the Ease of navigation :Navigation : - organization- simple/straightforward - Carefully label links - Step by step navigation w/ever possible

Mouse: single mouse click to access infoConsistent Layout : - standard page design - same symbol/icons - same set of navigation buttons

Style/Size icons/buttons : - with text - large button

Presenting Information to Older AdultsHuman Factors Application

Increasing the Ease of navigation :Menus : use pull down sparingly Scrolling : avoid automatic scrolling

Hyperlink: use icons with textSitemap : provide site mapHelp/Information : Tel.no / Email for questions

Presenting Information to Older AdultsHuman Factors Application

Design PrototypesInteraction Design :

• Use conventional interaction elements eg. Links

• Make it obvious what is clickable or not• Clickable items easy to hit• Minimize vert.scrllin,NO horizontal scrolling!

• Back buttons behaves predictably• User stay in control –no rolling text automatically

• Clear feedback- caption for images/video/animation

Design PrototypesInformation Architecture :

• Make the structure as visible as possible• Clearly label content categories – use language that older familiar

• Info.hierarchy – shallowest possible (group related topicss,2-5 clicks)

• Sitemap – include in every page

Design PrototypesInformation Design :

• Make it easy to find things on page quickly• Focus the writing on audience and purpose - active voice (directed to “you”)? - sentences short,simple,straightfwd• Use user’s language , minimize jargon ,technical terms

Design PrototypesProduct (Web) Design :

Design PrototypesPROJECT LIFE CYCLE1.Identifying concept – web 2.0, simple design, light , trendy and glossy

2.Identifying /finalizing final content – short, informative,

3.Menu/navigation layout – simple, interactive

4.Analysis Media Requirement – icons, consistent layout ,flow navigation

5.Development /implementation – design, programming, animation, video , media integration testing

6.Deployment – upload, testing (alpha / beta), UAT

Design Prototypes LOGO

About JEN-ii Features

How To Use

Buy JEN-ii Contact Us

Page Title

CONTENT

Footer

SEARCH

Jen-ii description

KISS Principle

Design Prototypes

Usability EvaluationMethod: using Heuristic Evaluation - “Usability engineering method for finding the usability problems in interface design, part of iterative process”

- It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles

- looks for violations of each of the heuristics (using checklist)- More in the nature of rules of thumb than specific usablity

guidelines

Usability EvaluationProcess:

1. Create personas2. Segmentation model3. Define Task4. Perform Task5. Rate Observation

Usability EvaluationCreate Personas:

Consider 4 factors:

1. AGE – life experience,educational level

2. ABILITY – Cognitive and physical

3. APTITUDE – Expertise with technology

4. ATTITUDE – Confidence level - Emotional state of mind

ConclusionHeuristic evaluation is the usability testing against

the products/systems NOT the testing the users.Consistency is the most important elements when

dealing with olders.Not need to follow all heuristics to develop the

website – its only the elements that needed because of the special aspects of age , ability, aptitude and attitude.

THE END

Typeface eg.:

Type Size example :

Type Weight example:

Justification example:

Evaluation Form