1
Dr Alexiei Dingli
Web Design Bashair Alqahtani
Eman Alsqour
Salma Alwaliei
Aljazi Alharbi
Noura Al-Hammod
SEC: 9C4
T.Badria Alfurhood
2
usability: the effectiveness with which users can
achieve tasks in one software environment
studying and improving usability is part of Human-
Computer Interaction (HCI)
What is usability?
3
visibility: ability for user to find controls that are
meant to be interacted with
Where are they?
What is their state? ("Is this setting on or off?")
feedback: response from the control to the user
before, during, or after an interaction
Visibility and feedback
4
cluttered or otherwise poor layout
requires horizontal scrolling, or makes assumptions
about user's screen size
poorly chosen colors
uses frames
uses splash screen(s)
poor or missing navigation controls (Back, Forward,
Home)
text is not scannable (can't be read quickly)
Common web usability problems
5
most important content isn't on the first page /
screenful.
nondescript headings
too many ads (or things that appear to be ads)
important site content is contained in PDF
documents
isn't designed to be easily indexed by a search
engine
(HTML title, meta tags, page text, link text, etc.)
tiny thumbnails of detailed large photos.
Cont’
6 this also often applies to CSE students
Users do not read
V.S
7
links that don't say where they go
badly chosen link text (such as "Click here for more
info")
links that forcibly open a new browser window
links opened by complex Javascript needlessly
visited links don't appear in a different color
Link usability problems
8
Cont’
9
poorly performing site search
having a web search feature (why??)
not having a site map or other means to navigate
the site
relying on non-standard plugins or browser
versions (e.g. Overly reliant on Flash, Java
applets, etc.)
Feature usability problems
10
Cont’
11
Cont’
12
13
Web design suggestions
14
place your name and logo on every page and make
the logo a link to the home page
provide search if the site has more than 100 pages
write straightforward and simple headlines and page
titles that clearly explain what the page is about
structure the page to facilitate scanning and help
users ignore large chunks of the page in a single
glance: for example, use grouping and subheadings
to break a long list into several smaller units.
Web design suggestions
15
Cont’
16
Cont’
17
Cont’
18
use hypertext to structure the content space .
use link titles .
Cont’
19
It is quite common to use thumbnail versions to represent
images that are too large.
Cont’
20
Ensure that all important pages are accessible for
users with disabilities.
Do the same as everybody else.
Cont’
Twitter Sign in
21
Jakob's Law of the Web User Experience: users spend
most of their time on other sites, so that's where they
form their expectations for how the Web works
Test your design with real users as a reality check.
Cont’
22
A List Apart
CSS Play
css/edge
Design by Fire
Jeffrey Zeldman Presents
QuirksMode
Sites about web design
23
1. Use clear and simple language
2. Write relevant content
3. Write only one idea per paragraph
4. Use lists instead of paragraphs
5. Write short sentences
6. Include internal sub-headings
7. Bolden important words
8. Use descriptive link text
9. Left-align text
10.Proofread your work
Writing for the web
24
• since Ajax requests happen in the background,
users may not know the page is loading
• well-designed web sites give visual cues to the user
so they know to wait
Ajax usability
25
The Six Components Of Web Forms:
• Labels
• Input Fields
• Actions
• Help
• Messages
• Validation
Forms and usability
26
27
28
Search Engine Optimization (SEO)
• is the process of affecting the visibility of a website or
a web page in a search engine's.
• The objective of search engine optimization (SEO) is to
increase a Web site's traffic counts by improving the
internal and external factors influencing ranking in search
results.
29
• get people to link to your site (particularly popular sites!)
• use relevant keywords in link text
• set descriptive meta tags
• use a site URL and page title that contains the keywords
you want to match
Cont’
30
31
What's wrong with each of these
web sites?• http://www.theworldsworstwebsiteever.co
m/
• http://www.orchy.com/dictionary/
• http://www.bigbearparties.com/
• http://www.lingscars.com/
• http://www.raft.org/
• http://www.rogerart.com/
• http://www.mrbottles.com/
http://www.theworldsworstwebsiteever.com/http://www.orchy.com/dictionary/http://www.bigbearparties.com/http://www.lingscars.com/http://www.raft.org/http://www.rogerart.com/http://www.mrbottles.com/
32
Examples of BAD website
usability
It’s cluttered, complicated, and feels like “work” just to try and figure out what
to do.
33
Cont’
This site makes it almost impossible to find what you are looking for.
34
Cont’
This website is in clear violation of good website usability with poorly presented
information, especially for an e-commerce website!
35
Cont’
This website mislabels the search box and pretty much hides it from users! It’s
almost as if they don’t want anyone to know what it is or use it.
36
Cont’ This screenshot shows an example of good and bad text choices for a black
background. Obviously higher contrast (white on black) is better than low
contrast for usability.
37
Cont’
this web page without any images is very boring and hard to read
38
Example of GOOD website
usabilitythis site one of the cleanest and best examples of great website usability
