Static Website by Misoi Jonathan

Static Website
By Misoi
Jonathan
Definitions
Static Website
Website Features
Principles of Usability Design
Basic Web Navigation
Definitions
A website, also written as web site, is a

collection of related web pages, including
multimedia content, typically identified
with a common domain name, and
published on at least one web server. A
web site may be accessible via a public
Internet Protocol (IP) network, such as the
Internet, or a private local area network
(LAN), by referencing a uniform resource
locator (URL) that identifies the site.
Static Website vs Dynamic Websites

Static Website is delivered to the user exactly as stored. A
static web page (sometimes called a flat page/stationary page) is a web
page that is delivered to the user exactly as stored, in contrast to
dynamic web pages which are generated by a web application
Dynamic Website
A server-side dynamic web page is a web page whose construction is
controlled by an application server processing server-side scripts. In server-side
scripting, parameters determine how the assembly of every new web page
proceeds, including the setting up of more client-side processing.
Web Server
aSpecializedsoftwarethatrespondstoclient(e.g.,Webbrowser)requestsby
providingresources(e.g.,XHTMLdocuments).Forexample,whenusersenteraUniform
ResourceLocator(URL)address,suchaswww.jkuat.ac.ke,intoaWebbrowser,theyare
requestingaspecificdocumentfromaWebserver.
Static Vs Dynamic
Some Definitions
Homepage: the introductory page of a website, typically serving
as a table of contents for the site
Hyperlink:
a link from a hypertext file or document to another

location or file, typically activated by clicking on a highlighted word or
image on the screen.
Menus: a list of commands or options, especially one displayed on

screen.
Banner:
a heading or advertisement appearing on a web page in

the form of a bar, column, or box.
Header: printed in the top margin

Footer:printed in the bottom margin
Scrolling: the action of moving displayed text or graphics up, down, or
across on a computer screen in order to view different parts of them.
Sidebar:
a narrow vertical area that is located alongside the main

display area, typically containing related information or navigation options.
Navigation:
the way to guide readers through a website, so that they

know how much content is available and where to find what they are looking
for.
Usability
What is Usability?
Ease of learning
Ease of use
Ease of remembering
Subjective satisfaction
Efficiency of use
Effectiveness of use
Typical Web-site Usability

Problems
Navigation
Knowing where you are
Finding what you want
Structure of web site

Layout
Needs sufficient white space
Use of large graphics
Usability Principles
Interface Design Prototyping

Storyboard
HTML Prototype
Language Prototype
Interface Evaluation
Heuristic
Walkthrough
Interactive
Formal Usability Testing
Creating a UI Prototype
Low-fidelity prototypes are
good! e.g.
Paper prototype
Visio/HTML/PPT/
prototype
Example
Aesthetics and Usability

The issues to consider include
the fixation and movement of the human
eye,
the use of colors,
the sense of balance and symmetry,
the alignment and spacing of elements,
the sense of proportion,
the grouping of related elements, etc.
the responsiveness of the system
Simplicity
Navigation:
Getting the user from A to
(where you want them to)
B.
Role of navigation
For users:
1. Find stuff
2.Get an
overview of
they
want
whats on the site
3. See where they are
4. See where they can go
For site owners:

5.Drive people to
action points
6.Cross-sell services
or highlight
additional
information
Choosing a navigation style

Why the navigation is there (its
role)
Who will be using it

Where they want to go
What YOU want them to
do
How you will manage it
(CMS etc)
The Structural-Browser Model

The Family-Tree model
Creates a clear hierarchy of content
Collection of links advance the user to other
pages
Types of Website Navigation

Horizontal Navigation
Vertical Navigation
Secondary Navigation
Utility Navigation
Footer Links
Breadcrumbs Trails
Searches
Pagination Links
Conserves the most
amount of
screen space
Location most familiar for

users,
we read left to right
Makes for using drop downs

for
secondary navigation
Does have a limit in terms of

length of navigation item
Vertical Navigation
Vertical Navigation
Good for sites with a lot

of
main navigation items
Supports multiple types of
secondary navigation
Can act as a page design
element
Normally takes up more
space then horizontal
navigation
Vertical Navigation
Common location for
displaying
B-level pages
Dont rely on more then 2

levels
of pop-out/drop down menus
Moves out of the way when

not
active to conserver screen
space
Design enough contrast

with the information below so
the user can clearly read the
text
Utility Navigation
Utility Navigation
Assistant pages
Pages that dont fit into a
single
logical category
Location/Language selectors
Shopping Cart/User login

info
Pages that you want displayed
on
every page
Footer Links
Footer Links
Provides a place for important
information away from other
content
Acts as a visual End to your
page
Allows users to access pages
without scrolling back to the top
Can be styled as multiple
columns
Breadcrumb Trails
Breadcrumb Trails
Convenient for users

Reduces clicks to return to
higherlevel pages
Doesnt usually hog screen space
Dont use when you dont need

to
Dont use as primary navigation
Dont use when pages have
multiple
categories
Search Boxes
Search Boxes
Not every website needs a search

box
The box must be clearly visible,
quickly recognizable and easy to
use
A search box should be a box.
A search box should be simple
Dont make the input field too short
Dont making the submit button
too small
Pagination Navigation
Pagination Navigation
Provide large clickable areas

Identify the current page
Space out page links
Provide Previous and Next links
Use First and Last links
Put First and Last links on the
outside
Give the user a sense of volume
The Golden
Rules of
Web
Navigation.
1. Dont make the user think
The Golden
Rules of
Web
Navigation.
2. Dont test user

patience
The Golden
Rules of
Web
Navigation.
2.
Dont test user

patience
3.
Focus their
attention
The Golden
Rules of
Web
Navigation.
2.
Dont test user

patience
3.
Focus their
attention
4.
Organize your
content
The Golden
Rules of
Web
Navigation.
2.
Dont test user

patience
3.
Focus their
attention
4.
Organize your
content
5.
Use natural
descriptions
The Golden
Rules of
Web
Navigation.
2.
Dont test user

patience
3.
Focus their
attention
4.
Organize your
content
5.
Use natural
descriptions
6.
Strive for
Simplicity
The Golden
Rules of
Web
Navigation.
2.
Dont test user

patience
3.
Focus their
attention
4.
Organize your
content
5.
Use natural
descriptions
6.
Strive for
Simplicity
The Golden
Rules of Web
Navigation.
1. Dont make the user

think
2. Dont test user patience
3. Focus their attention
4. Organize your content
5. Use natural descriptions
6. Strive for simplicity
7. Embrace whitespace
8. Dont assume

Static Website by Misoi Jonathan

Uploaded by

Copyright:

Available Formats

Static Website by Misoi Jonathan

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Static Website by Misoi Jonathan

Uploaded by

Copyright:

Available Formats

Static Website

A website, also written as web site, is a

Static Website vs Dynamic Websites

a link from a hypertext file or document to another

Menus: a list of commands or options, especially one displayed on

a heading or advertisement appearing on a web page in

Header: printed in the top margin

a narrow vertical area that is located alongside the main

the way to guide readers through a website, so that they

Typical Web-site Usability

Structure of web site

Interface Design Prototyping

Formal Usability Testing

Aesthetics and Usability

For site owners:

Choosing a navigation style

Who will be using it

The Structural-Browser Model

Types of Website Navigation

Location most familiar for

Makes for using drop downs

Does have a limit in terms of

Good for sites with a lot

Dont rely on more then 2

Moves out of the way when

Design enough contrast

Shopping Cart/User login

Convenient for users

Dont use when you dont need

Not every website needs a search

Provide large clickable areas

1. Dont make the user think

1. Dont make the user think

2. Dont test user

1. Dont make the user think

Dont test user

1. Dont make the user think

Dont test user

1. Dont make the user think

Dont test user

1. Dont make the user think

Dont test user

1. Dont make the user think

Dont test user

1. Dont make the user

You might also like