INTRODUCTION TO WEB

warbarnacleSecurity

Nov 5, 2013 (3 years and 7 months ago)

68 views

INTRODUCTION TO WEB
USABILITY AND ACCESSIBILITY

COAP 2170


WEEK 1

Introduction

Instructor


Dejan Dimitrovski


dejan.dimitrovski@gmail.com


dimitdej@webster.edu


http://coap2170.ddejan.com


06991


216 61 91

Course Text Book

“Don't
Make Me Think:

A
Common Sense
Approach to Web
Usability”
by Steve Krug


Other Articles


Optional

Designing Web Usability: The Practice of
Simplicity, by
Jakob

Nielsen



The building blocks for Web Designers

The 5 Components of Web Design

Web Technology

Content

Site Architecture

Visual
Design

Interaction

Web Technology


Client Side


Browsers


HTML, XHTML, HTML5


CSS


JavaScript


Infrastructure


HTTP, TCP/IP, DNS, IPv4


Server Side


Web Server (
Appache
, IIS, etc)


Programming languages


Databases

Web Content


Text


Images


Multimedia


Video


Sound


Other


Flash


Silverlight


Java Applets

Site Architecture


Site organization


Categorization


Tags


Search Engine

Visual Design


Branding


Appeal


Visual Metaphor

Interaction


Web Sites/Pages as an interface to the user


The User Experience with the Web Site

Web Technology

Content

Site
Architecture

Visual
Design

INTERACTION

WEB USABILITY & ACCESSIBILITY

Usability

“Usability is the
art

and
science

of designing systems or products
that are effective, efficient,
engaging, error tolerant and easy to
learn”

*http://www.d.umn.edu/itss/support/Training/Online/webdesign/glossary/u.html

Usability is defined by five
components


Learnability
: How easy is it for users to accomplish
basic tasks the first time they encounter the design


Efficiency
: Once users have learned the design, how
quickly can they perform tasks


Memorability
: When users return to the design after a
period of not using it, how easily can they reestablish
proficiency


Errors
: How many errors do users make, how severe
are these errors, and how easily can they recover from
the errors


Satisfaction
: How pleasant is it to use the design

Measuring Usability


When it comes to Usability there is never
something 100% right or wrong


There are many guidelines but Usability
always boils down to personal preferences


The only way to measure Usability is by doing
Usability Testing and optimizing the design for
the majority of visitors

Web Usability


Broad goal of Web Usability


Present the information to the user in a clear and
concise way


Give the correct choices to users, in an obvious
way


Remove any ambiguity regarding the
consequences of an action


Put the most important thing in the right place on
a web page

Accessibility

“Accessibility is treating
everyone
,
no matter what their ability, the
same.”

Accessibility


Accessibility is often misunderstood as focusing
on people with disabilities
but

it is not limited to
this


Web Accessibility means that also users with
“non
-
standard” browsers (mobile devices, screen
reader, no
javascript
, etc) can access the
information/service provided by the web
page/web site.

Why is Web Usability so important


The Internet reverses the way consumers use
products/services


Old way


Users buy a product and then
experience how usable it is


Internet


Users first experience the usability
and then decide if they should use the
product (service)

Why web sites fail Usability


Business model


Treating the web pages as the traditional mediums for
communication with customers


Information Architecture


Structuring a web site to reflect how the company is
organized rather than how the customer perceives it


Page Design


Creating pages that cater to the needs of the product
producers, rather then the product consumers


Content Authoring


Writing for the web the same way as with writing for other
communication mediums (brochures, e
-
mails, etc)

Creating Usable Web Sites


“HOME RUN” Web Sites


H
igh Quality Content


O
ften updated


M
inimal download


E
ase of Use



R
elevant to users’ needs


U
nique to the online medium


N
et
-
Centric corporate culture

High Quality Content


Content that is relevant to the users


Easily comprehendible


Relevant meta
-
data

Often Updated


Update often ≠ Must make changes constantly


The content should be up to date and relevant
to the users that are visiting the web
-
site at
the given moment



Minimal download


Minimal Download = Fast Response Times =
Satisfied Users


The page render time is an important factor to
consider when designing web pages



Caveat


Sometimes too fast response times
are not good as the user might not register
the transition from one page to the other.
However this is rarely an issue in web usability

Ease of use


The users should be able to intuitively use the
web sites


Do not break typical design conventions


Make it obvious what the web site offers

Relevant to user needs


Include only the information that is of
importance of the user


don’t make the website for how the employees
see the organization (unless it’s an Intranet
Website)


Nice to have features/content increases
download times and makes the pages more
cluttered (lesser overview)


“Less is More”

Unique to the Online Medium


Do not treat the web site as a classical
communication medium


Make use of various services that can
integrate with a web site (online maps,
galleries, online communities, video,
etc
)

Net Centric Corporate Culture


Commit resources to use the full potential of a
web site


Do not make a web
site just because
everyone
has one


Do not think of web sites as a one time project

COURSE PROJECT

Course Project


Your task is to prepare a Web Site Proposal
Document


Imagine you were approached by a client and
were asked to do a website for him/her


The client is imaginary (does not have to be) so it
is up to you to decide what kind of web site it will
be


Sports (fan) club


Non Profit organization


Some company


Online retail shop


Document Structure


Who is the client


Type of business, location, num. employees,
competitors, communication with customers, etc


Expectations of web site


“The What and Why” of the project


Online presence, promoting products, creating
communities, selling online, generate requests for
information, generate requests for information,
recruit employees, how often to update, etc




Document Structure (cont)


Target Audience


Demographics (age, gender, location), experience
with web usage


3 Similar Web Sites


A statement on Usability for the web site


A statement on Accessibility for the web site


Site Map


at least 5 pages need to be included

Document Structure (cont)


Use cases of the Web Site


What will the typical user do on the web site



Prototypes


How will the web site look


(You can use existing templates/designs that you
find on the internet, no need to create your own)

Homework for Week 2


In your own words, describe what is meant by the term
usability


Use this presentation as a reference but also do some online
research


Choose a web site that you often visit* and write a short
report on what the web page is about, what can visitors
do and how easy is to use the web site. Is there something
that you would think needs to be done differently?


Find an everyday example of bad usability. This can be a
web page but it does not have to be. Describe the problem
at hand and suggest an alternative how to make it more
usable.

*please not some of the ‘major’ websites like Google,
Facebook
, Yahoo, etc

Bad Usability Example

Open Application

Warning message

Click Home

Find/Open Settings

Search for Regional Settings (general settings)

Open International Menu

Select Region Format

Look for Austria (does not exist)

Check “German” submenu, select Austria

Back to Home Screen

Find application icon

Open Application


Open Application

Warning message with region choices

Select region (1 of 3)

Use Application


Elevator Buttons