SlideShare a Scribd company logo
Practical Usability Guidelines
For Your Website
Justin Mifsud
About Me
Personal
 Justin Mifsud
 Core expertise: Usability, User Experience (UX), User Interface Design, Marketing


Education
 Marketing Graduate with the Chartered Institute of Marketing (UK)
 BSc (Hons) Computing & Information Systems (Goldsmiths, University of London)


Occupation
 Head of Marketing at Holistic Group
 Usability Blog – www.usabilitygeek.com


Justin Mifsud - Practical Usability Guidelines for your Website              Page 2
What is Web Site Usability?


                                                “The ease with which users        learn to use a web
                                                 site, how        efficient they are when using it, how
                                                 easy it is for them to      remember how to use it
                                                 and how          satisfied they are when they use it “

                                                (Nielsen & Loranger, 2006)




Justin Mifsud - Practical Usability Guidelines for your Website                                    Page 3
Why is Usability Important for My Site?


                          Users Achieving Goals (Theirs & Company)


                          Inc. Customer Satisfaction, Retention & Loyalty


                          Importance inc. In Competitive Environments


                          83% Avg. Improvement in KPI after Usability Redesign


Justin Mifsud - Practical Usability Guidelines for your Website                  Page 4
The Benefits are Obvious ….but


 90%          of all websites ...or approximately

 331million websites have poor
 usability (as at December 2011)




 97% of top 100 websites from 20
 countries did not achieve Single-A
 accessibility




Justin Mifsud - Practical Usability Guidelines for your Website   Page 5
Luckily for us, we have Guidelines

 Used for Usability Inspection Methods – to

 identify    usability violations

 Based on        extensive studies
 from various fields


 Adherence to usability guidelines effectively

 improves website usability

Justin Mifsud - Practical Usability Guidelines for your Website   Page 6
What are the Main Usability Problems?

                                        1. Findability (27%)

                                        2. Information (19%)

                                        3. Search (15%)

                                         4. Page Design (7%)


                       Total = 68% of all Usability Problems


Justin Mifsud - Practical Usability Guidelines for your Website   Page 7
1. Findability

   How easily users can locate the content they are looking for



                          Information
                                                                  Category Names
                          Architecture

                                                      Findability

                            Navigation                                Links


Justin Mifsud - Practical Usability Guidelines for your Website                    Page 8
1. Findability violations

  No Info Scent                   Mysterious Navigation              Clutter




                                                                  Multi-level menus




Justin Mifsud - Practical Usability Guidelines for your Website                   Page 9
2. Information

   Text, images and other media presented on your website



                                                                    Product
                               Content
                                                                  Information

                                                    Information

                           Corporate
                                                                    Prices
                          Information

Justin Mifsud - Practical Usability Guidelines for your Website                 Page 10
2. Information Violations




Justin Mifsud - Practical Usability Guidelines for your Website   Page 11
3. Search

18.2 billion monthly searches using Search Engines in the U.S. alone

                   Users      expect your search interface to look like and
      =
                   behave like that of major Search Engines!




Justin Mifsud - Practical Usability Guidelines for your Website               Page 12
3. Search Usability Guidelines

                                                           Textbox &
                                                            Button
                               Search Site
                                but Not                                 Top Right
                                Outside                                Hand Corner




                      Button Must
                                                                              Present on
                       be Called                          Search               All Pages
                        Search




                                 Textbox
                                 Must Be                               Not a Search
                                  Empty                                    Link
                                                            20 Char
                                                            Textbox




Justin Mifsud - Practical Usability Guidelines for your Website                            Page 13
3. Search

GOOD




 BAD




Justin Mifsud - Practical Usability Guidelines for your Website   Page 14
4. Page Design

The User
                                                                            Readability
Interface (UI) of
your Website

                                                  Graphics                                            Layout
                                                                             Page
                                                                            Design


                                                                  Amateur                 Scrolling




Justin Mifsud - Practical Usability Guidelines for your Website                                                Page 15
4. Page Design

 GOOD




 BAD




Justin Mifsud - Practical Usability Guidelines for your Website   Page 16
Even the Big Guns Fail!




Justin Mifsud - Practical Usability Guidelines for your Website   Page 17
Even the Big Guns Fail!


Logo
Positioning




    Justin Mifsud - Practical Usability Guidelines for your Website   Page 18
No Search?
    Even the Big Guns Fail!


Logo
Positioning




    Justin Mifsud - Practical Usability Guidelines for your Website        Page 19
No Search?
    Even the Big Guns Fail!                                           Menu
                                                                      Disappearing




Logo
Positioning




    Justin Mifsud - Practical Usability Guidelines for your Website                       Page 20
No Search?
    Even the Big Guns Fail!                                           Menu
                                                                      Disappearing




Logo
Positioning




POPUPS !!!
Seriously??




    Justin Mifsud - Practical Usability Guidelines for your Website                       Page 21
No Search?
     Even the Big Guns Fail!                                           Menu
                                                                       Disappearing




 Logo
 Positioning




 POPUPS !!!
 Seriously??




Low
Contrast
Text



     Justin Mifsud - Practical Usability Guidelines for your Website                       Page 22
No Search?
     Even the Big Guns Fail!                                           Menu
                                                                       Disappearing




 Logo
 Positioning




 POPUPS !!!
 Seriously??




Low
Contrast                                                                                    Too much
Text                                                                                        importance


     Justin Mifsud - Practical Usability Guidelines for your Website                       Page 23
No Search?
      Even the Big Guns Fail!                                           Menu
                                                                        Disappearing




 Logo
 Positioning




  POPUPS !!!
  Seriously??




Low
Contrast                                                                                     Too much
Text                                                                                         importance

Bad convention for links
      Justin Mifsud - Practical Usability Guidelines for your Website                       Page 24
No Search?
      Even the Big Guns Fail!                                                           Menu
                                                                                        Disappearing




 Logo
 Positioning




  POPUPS !!!
  Seriously??




Low
Contrast                                                                                                        Too much
Text                                                                                                            importance

Bad convention for links
      Justin Mifsud - Practical Usability Guidelines for your Website
                                                                        Utility Navigation badly placed        Page 25
No Search?
      Even the Big Guns Fail!                                                           Menu
                                                                                        Disappearing




 Logo
 Positioning


                                                                                                                Too
                                                                                                                Large

  POPUPS !!!
  Seriously??




Low
Contrast                                                                                                        Too much
Text                                                                                                            importance

Bad convention for links
      Justin Mifsud - Practical Usability Guidelines for your Website
                                                                        Utility Navigation badly placed        Page 26
No Search?
      Even the Big Guns Fail!                                                           Menu
                                                                                        Disappearing




 Logo
 Positioning


                                                                                                                Too
                                                                                                                Large    F
                                                                                                                         L
  POPUPS !!!                                                                                                             A
  Seriously??                                                                                                            S
                                                                                                                         H



Low
Contrast                                                                                                        Too much
Text                                                                                                            importance

Bad convention for links
      Justin Mifsud - Practical Usability Guidelines for your Website
                                                                        Utility Navigation badly placed        Page 27
Even the Big Guns Fail!

                      RESOLUTION




             1024 x 768 (14% Still use it!)



Justin Mifsud - Practical Usability Guidelines for your Website   Page 28
Even the Big Guns Fail!

                      RESOLUTION                                  BROWSER RENDERING




             1024 x 768 (14% Still use it!)                        I’d Rather Avoid This!



Justin Mifsud - Practical Usability Guidelines for your Website                             Page 29
Even the Big Guns Fail!                                                  DEVICES




           iPhone                                                 iPad

Justin Mifsud - Practical Usability Guidelines for your Website                    Page 30
Where Do We Go From Here?


                                   Books, Blogs, Journals


                                   Social Networking Sites – Twitter, LinkedIn


                                   Conferences


                                    Malta Usability & User Experience Group


Justin Mifsud - Practical Usability Guidelines for your Website                  Page 31
My Blog - UsabilityGeek




Justin Mifsud - Practical Usability Guidelines for your Website   Page 32
Thanks For Your Attendance!


                                   info@usabilitygeek.com


                                   @justinmifsud


                                   http://mt.linkedin.com/in/justinmifsud


                                    http://usabilitygeek.com


Justin Mifsud - Practical Usability Guidelines for your Website             Page 33

More Related Content

Viewers also liked

Differences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & GamificationDifferences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & Gamification
Infopro Learning, Inc.
 
Web Usability
Web UsabilityWeb Usability
Web Usability
blacktelephone
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
Jennifer Riehle McFarland
 
Gamification and Game-based Learning
Gamification and Game-based LearningGamification and Game-based Learning
Gamification and Game-based Learning
Caitlin Cahill
 
Web Usability Meets Course Website Usability
Web Usability Meets Course Website UsabilityWeb Usability Meets Course Website Usability
Web Usability Meets Course Website Usability
Ann Fandrey
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
mcongdon
 
Data Visualization and Dashboard Design
Data Visualization and Dashboard DesignData Visualization and Dashboard Design
Data Visualization and Dashboard Design
Jacques Warren
 
Engaging Kids in Learning: game based learning and gamification in education
Engaging Kids in Learning: game based learning and gamification in education Engaging Kids in Learning: game based learning and gamification in education
Engaging Kids in Learning: game based learning and gamification in education
Pierre Le Lann
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Carles Farré
 
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
Sherry Jones
 

Viewers also liked (10)

Differences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & GamificationDifferences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & Gamification
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
 
Gamification and Game-based Learning
Gamification and Game-based LearningGamification and Game-based Learning
Gamification and Game-based Learning
 
Web Usability Meets Course Website Usability
Web Usability Meets Course Website UsabilityWeb Usability Meets Course Website Usability
Web Usability Meets Course Website Usability
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
 
Data Visualization and Dashboard Design
Data Visualization and Dashboard DesignData Visualization and Dashboard Design
Data Visualization and Dashboard Design
 
Engaging Kids in Learning: game based learning and gamification in education
Engaging Kids in Learning: game based learning and gamification in education Engaging Kids in Learning: game based learning and gamification in education
Engaging Kids in Learning: game based learning and gamification in education
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)
 
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
Introduction to Gamification VS. Game-Based Learning (GBL) - Make An Engaging...
 

Recently uploaded

原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 

Recently uploaded (20)

原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 

Practical Usability Guidelines For Your Website (An Evening Of Web Usability - 7th Feb 2012 - Malta)

  • 1. Practical Usability Guidelines For Your Website Justin Mifsud
  • 2. About Me Personal  Justin Mifsud  Core expertise: Usability, User Experience (UX), User Interface Design, Marketing Education  Marketing Graduate with the Chartered Institute of Marketing (UK)  BSc (Hons) Computing & Information Systems (Goldsmiths, University of London) Occupation  Head of Marketing at Holistic Group  Usability Blog – www.usabilitygeek.com Justin Mifsud - Practical Usability Guidelines for your Website Page 2
  • 3. What is Web Site Usability? “The ease with which users learn to use a web site, how efficient they are when using it, how easy it is for them to remember how to use it and how satisfied they are when they use it “ (Nielsen & Loranger, 2006) Justin Mifsud - Practical Usability Guidelines for your Website Page 3
  • 4. Why is Usability Important for My Site? Users Achieving Goals (Theirs & Company) Inc. Customer Satisfaction, Retention & Loyalty Importance inc. In Competitive Environments 83% Avg. Improvement in KPI after Usability Redesign Justin Mifsud - Practical Usability Guidelines for your Website Page 4
  • 5. The Benefits are Obvious ….but 90% of all websites ...or approximately 331million websites have poor usability (as at December 2011) 97% of top 100 websites from 20 countries did not achieve Single-A accessibility Justin Mifsud - Practical Usability Guidelines for your Website Page 5
  • 6. Luckily for us, we have Guidelines Used for Usability Inspection Methods – to identify usability violations Based on extensive studies from various fields Adherence to usability guidelines effectively improves website usability Justin Mifsud - Practical Usability Guidelines for your Website Page 6
  • 7. What are the Main Usability Problems? 1. Findability (27%) 2. Information (19%) 3. Search (15%) 4. Page Design (7%) Total = 68% of all Usability Problems Justin Mifsud - Practical Usability Guidelines for your Website Page 7
  • 8. 1. Findability How easily users can locate the content they are looking for Information Category Names Architecture Findability Navigation Links Justin Mifsud - Practical Usability Guidelines for your Website Page 8
  • 9. 1. Findability violations No Info Scent Mysterious Navigation Clutter Multi-level menus Justin Mifsud - Practical Usability Guidelines for your Website Page 9
  • 10. 2. Information Text, images and other media presented on your website Product Content Information Information Corporate Prices Information Justin Mifsud - Practical Usability Guidelines for your Website Page 10
  • 11. 2. Information Violations Justin Mifsud - Practical Usability Guidelines for your Website Page 11
  • 12. 3. Search 18.2 billion monthly searches using Search Engines in the U.S. alone Users expect your search interface to look like and = behave like that of major Search Engines! Justin Mifsud - Practical Usability Guidelines for your Website Page 12
  • 13. 3. Search Usability Guidelines Textbox & Button Search Site but Not Top Right Outside Hand Corner Button Must Present on be Called Search All Pages Search Textbox Must Be Not a Search Empty Link 20 Char Textbox Justin Mifsud - Practical Usability Guidelines for your Website Page 13
  • 14. 3. Search GOOD BAD Justin Mifsud - Practical Usability Guidelines for your Website Page 14
  • 15. 4. Page Design The User Readability Interface (UI) of your Website Graphics Layout Page Design Amateur Scrolling Justin Mifsud - Practical Usability Guidelines for your Website Page 15
  • 16. 4. Page Design GOOD BAD Justin Mifsud - Practical Usability Guidelines for your Website Page 16
  • 17. Even the Big Guns Fail! Justin Mifsud - Practical Usability Guidelines for your Website Page 17
  • 18. Even the Big Guns Fail! Logo Positioning Justin Mifsud - Practical Usability Guidelines for your Website Page 18
  • 19. No Search? Even the Big Guns Fail! Logo Positioning Justin Mifsud - Practical Usability Guidelines for your Website Page 19
  • 20. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning Justin Mifsud - Practical Usability Guidelines for your Website Page 20
  • 21. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning POPUPS !!! Seriously?? Justin Mifsud - Practical Usability Guidelines for your Website Page 21
  • 22. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning POPUPS !!! Seriously?? Low Contrast Text Justin Mifsud - Practical Usability Guidelines for your Website Page 22
  • 23. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning POPUPS !!! Seriously?? Low Contrast Too much Text importance Justin Mifsud - Practical Usability Guidelines for your Website Page 23
  • 24. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning POPUPS !!! Seriously?? Low Contrast Too much Text importance Bad convention for links Justin Mifsud - Practical Usability Guidelines for your Website Page 24
  • 25. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning POPUPS !!! Seriously?? Low Contrast Too much Text importance Bad convention for links Justin Mifsud - Practical Usability Guidelines for your Website Utility Navigation badly placed Page 25
  • 26. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning Too Large POPUPS !!! Seriously?? Low Contrast Too much Text importance Bad convention for links Justin Mifsud - Practical Usability Guidelines for your Website Utility Navigation badly placed Page 26
  • 27. No Search? Even the Big Guns Fail! Menu Disappearing Logo Positioning Too Large F L POPUPS !!! A Seriously?? S H Low Contrast Too much Text importance Bad convention for links Justin Mifsud - Practical Usability Guidelines for your Website Utility Navigation badly placed Page 27
  • 28. Even the Big Guns Fail! RESOLUTION 1024 x 768 (14% Still use it!) Justin Mifsud - Practical Usability Guidelines for your Website Page 28
  • 29. Even the Big Guns Fail! RESOLUTION BROWSER RENDERING 1024 x 768 (14% Still use it!) I’d Rather Avoid This! Justin Mifsud - Practical Usability Guidelines for your Website Page 29
  • 30. Even the Big Guns Fail! DEVICES iPhone iPad Justin Mifsud - Practical Usability Guidelines for your Website Page 30
  • 31. Where Do We Go From Here? Books, Blogs, Journals Social Networking Sites – Twitter, LinkedIn Conferences Malta Usability & User Experience Group Justin Mifsud - Practical Usability Guidelines for your Website Page 31
  • 32. My Blog - UsabilityGeek Justin Mifsud - Practical Usability Guidelines for your Website Page 32
  • 33. Thanks For Your Attendance! info@usabilitygeek.com @justinmifsud http://mt.linkedin.com/in/justinmifsud http://usabilitygeek.com Justin Mifsud - Practical Usability Guidelines for your Website Page 33