Web Design, User Interfaces, Users, Purpose, Features

Download Report

Transcript Web Design, User Interfaces, Users, Purpose, Features

What is an Information System?

An integrated set of components that
allow people to carry out tasks effectively
by providing access to information.

Examples of information systems:
◦
◦
◦
◦
◦
Databases
Websites
Mobile Applications
Kiosk Systems
Games
What Information Systems have
you used?
Electronic Season Ticket Turnstile
 Argos Stock Checker
 Cinema Ticket collection machine

What is the world wide web?

A collection of multimedia information
held on the internet

Information stored at websites that often
contain many web pages

Websites are stored on web servers
that are connected to the internet
What is the world wide web?
Web page = a single document (html file)
 Website = an effective way to split up
information across multiple web pages
 Each website has a Home page that is a
starting point to explore the website
 A website may have hyperlinks to other
websites

HTML

HTML stands for Hyper Text Markup
Language and is the main language used to
produce webpages

In HTML you use tags to construct the
Webpage, for example
<b> Mr Ross </b>
would put Mr Ross in bold
HTML Tags
Open Tag Close Tag
<html>
</html>
<head>
</head>
<title>
<body>
</title>
</body>
<hX>
<i>
<center>
<p>
</hX>
</i>
</center>
</p>
What the Tag identifies
Start and end of HTML file
Start and end of the heading
section
Page title
Start and end of the content
of the page
Headings numbered 1-6
Italics
Center alignment
Paragraph
More HTML Tags
Open Tag
<u>
<b>
<br>
<a href>
<img>
Close Tag
</u>
</b>
</a>
What the Tag identifies
Underlines the text
Makes the text bold
Starts a new line in text
Adds a hyperlink to another
webpage
Used to insert an image
What is a URL?
Uniform Resource Locator
 Full web address that is used to access a page
directly
 a unique address for a file on the internet
 http://www.bbc.co.uk/news/Scotland/index.htm
 Protocol – http - HyperText Transfer Protocol
 Domain name - www.bbc.co.uk
 Pathname - news/Scotland/index.htm – leads to
the file

What is a hyperlink?
A link between web pages, documents or files
 Hyperlinks are activated by clicking on text
or an image or an area of the screen like a
hotspot

Internal hyperlink goes to another page
within the same website
 External hyperlink goes to a different
website – which may be on a different server

Absolute and relative hyperlinks

To create hyperlinks:◦ HTML used (as hyperlinks are part of a webpage)
◦ href attribute holds the URL of the webpage
◦ <a> tag is also used

Internal hyperlink –
◦ E.g. < a href=“../home.htm”> Home page </a>
◦ relative addressing is used – no protocol or domain
name is needed

External hyperlink –
◦ E.g. < a href=“http://www.bbc.co.uk/news”>BBC</a>
◦ absolute addressing is used
Hyperlinks
www.allshopping.co.uk
index.htm
fish.png
images
cereals.bmp
foods
frozen.htm
finest
fresh.htm
resources
specials.htm price_list.pdf
What is navigation?

How the user finds their way around an
information system

Navigation structure – how pages or
screens are arranged
◦ Linear
◦ Hierarchical
◦ Web
Navigation structure - Linear
Level 1

Level 2
Level 3
Level 4
Pages viewed in order e.g.
◦ taking a survey
User can go back to the previous page
 Best for short sequences

Navigation structure - Hierarchical
Level 1
Level 2
Level 3
Level 3
Level 2
Level 3
Also called “tree navigation”
 Fast movement between pages
 Easy to add pages to

Level 3
Navigation structure - Web

Level 6
Level 4
Level 7
Level 2
Level 1
Level 3
Level 8
Level 5
Level 9
Multiple direct connections between web
pages
Navigation Methods
 Web
Browser Navigation
◦ Type in URL
◦ Forward, Back and Home buttons
◦ Hyperlinks (text)
◦ Hotspots (image)
◦ Favourites/Bookmarks
◦ History
Navigation Aids

Searching – using keywords
Menus – many websites
have drop down menus of
pages


Breadcrumbs show the user’s position
in the website
More navigation aids

Guided navigation – e.g. filters used on
shopping websites

Tag clouds – an image containing
keywords that are linked to web pages

Site maps - a web page that lists the
pages on a website
More navigation aids

Use a Navigation bar with links to
different areas of the website
Good website design to aid navigation
Consistent throughout the site so users
get used to it
 Reduce clutter by grouping links into
sections
 Keep the number of clicks to a minimum
to get users to a page quickly
 Range of text and graphic-based
hyperlinks to provide a flexible way to
move around

What is a web browser?

Program to let the user browse web
pages

Loads pages from the web server and
displays them to you

The HTML of the page is responsible for
the appearance of the page, not the
browser
Web browser features
Home page - viewed when the browser
starts – or Home button clicked
 Store a reading list that can be viewed
offline
 Save pages and print pages
 Stores history of recently used pages
 Bookmarks/Favourites to remember
URLs
 Tabbed browsing to view several web
pages in one window

What is a search engine?

Web site that helps you to find information
Examples: Bing, Google

How search engines work:-

1. Search web pages for different words
2. Create an index (list) of the words and the
pages (URL) that they are found on
3. Search the indexes using the words that the
user entered
4. Display hyperlinks to the pages containing the
words that the user entered
Basic search
User enters one or more keywords
 Sometimes the keywords are called a
search string
 Pages that are found by a search engine
are called hits
 Well chosen keywords cuts down the
time taken to find what you are looking
for

Basic search … continued

Phrases are enclosed in quotation marks
e.g. “Springburn Academy”

Search engine finds web pages that
contain that complete phrase – not just
part of it

Good as fewer results returned so more
likely to contain what you are looking for
Advanced search

Most search engines let the user use:◦ keyword AND keyword – all keywords must
appear on the web page
◦ OR – at least one keyword must appear on
the web page
◦ NOT – a keyword must not appear on the
web page e.g. Springburn NOT school
Purpose of an Information System

To store information and present it to the
user in a form which is useful to the user.

An organisational information
system collects, organises, stores,
processes and outputs information for
the benefit of a company or an
organisation.
Describe the Purpose

Different websites have different purposes
eg. To inform, shopping, banking etc

Look at these websites and identify their
purpose:
School website
 www.amazon.co.uk
 www.bbc.co.uk/bitesize/
 www.theaa.com/route-planner/index.jsp

Features of an Information System

Main features of an Information System
(IS) are:
◦ Hardware
 physical parts of a computer system
◦ Software
 the programs that the hardware is
used to run
 should be able to process, search and
sort data quickly and efficiently
Features of an IS (cont)
◦ Storage
 all IS store data
 use hard disks, solid state disks or
cloud
◦ Networks/Connectivity
 a network is a set of computers joined
together so information can be
transferred/communicated between
them
Functions of an IS

Collecting information
◦ Taking information in and gathering it
together
◦ Variety of input devices used for this
purpose:
 keyboards
 mice
 scanner
Functions of an IS (cont)

Organising information
◦ managing the information using software
such as a database package or web page
creation application

Storing information
◦ saving information so it can be used again
◦ information needs to be regularly backed
up
Functions of an IS (cont)

Processing information
◦ performing operations on the data such
as sorting, searching and calculating

Outputting information
◦ making the information available in the
required format – e.g. printed, in a web
page, on the screen, emailed
Example: School Information System






Purpose: take care of the administration
tasks in a school
Collecting: gathering registration information
and examination marks
Organising: pupils into classes for lessons
Storing: keeping backups of all data
Processing: putting reports from different
teachers together for each pupil
Outputting: printing reports for parents,
sending marks to examiners, printing
attendance information for Personal Support
Advantages of computer based
information systems
Computers can retrieve (find) data much
quicker than searching manual filing
systems.
 Computer files take up very little physical
space
 Computer based system can be
constantly updated
 Different organisations information
systems can be linked in networks
 Can access data from anywhere using the
internet

Wireframe Design
A wireframe is a diagram or sketch
which shows the appearance and function
of a website or information system.
 Contains details such as position of each
element (text, graphics, hyperlinks etc) on
the page
 May be a basic outline - hand drawn
 May be a detailed diagram, created using
dedicated software

Actual web page
Wireframe Example
Testing
Testing should check: Links and navigation work
 Each web page matches the user interface
design i.e. text and graphics are
positioned correctly and correct colour
scheme and font are used
 Buttons work
 Page counters update
Testing (cont)
Testing should check: Menus work
 Input boxes accept text
 Graphics, text, videos and audio files all
appear and have correct content
 The website works with different
browsers
 Any JavaScript coding works as expected
Users of an IS

IS users include experts and
novices (beginners)

Expert
◦ familiar with the features and functions
of the IS
◦ does not need detailed instructions to
get started
Users of an IS (cont)

Novice
◦ unfamiliar with the features and
functions of the IS
◦ requires help to get started using the
system
◦ will benefit from detailed instructions
Age-range
The age-range refers to the ages of the
users
 Target audience of an Information
System is the set of typical users.
 Typical users include: young child,
teenager and adult.

◦ E.g. Facebook age-range and target audience
would be: (13+) teenagers and adults

MUST take target audience into account
when designing the user interface of an
Information System
What is the User Interface?
User interface – the way the computer
and the user communicate
 Also known as the HCI – human
computer interface
 Good software + Poor interface = no
body wants to use

What is wrong with this website?
Visual Layout
 Pages
should look appealing to all
users
 Avoid information overload
 A balance of graphics and text
 Accessibility features
 Remember the target audience
 Avoid clutter – use whitespace
Navigation
 Consideration
must be given to how the
user will navigate the information
system.
 Browser
buttons
 Hyperlinks
 Hotspots
 Pop-up menus
 Search features
Selection
Selection - making a choice
 How will the user make choices in the
information system? e.g.
◦ Using a menu
◦ Form filling
◦ Radio button
◦ Hotspot

Selection (cont)
 Which
of these is better?
 Selection
is better than free text
entry when choice is limited - user is
forced to choose a valid option
Selection (cont)

E.g. consider a takeaway shop online
ordering. If they only sell 4 flavours of
pizza then forcing the user to choose one
of them stops mistakes
PIZZA
Hawaiian
Enter pizza choice:
Margherita
Cheese and little fi|
Meat Feast
Pepperoni
Look at these screens from the
same suite of products:
Consistency

Pages and screens should have a
consistent appearance throughout the
information system
Text: font, colour, etc
 Use of colour
 Page balance
 Navigation features

Readability
 About
A
A
A
making the website usable by
everyone
◦ all abilities
◦ all impairments
 Methods of making an information
system accessible include:◦ Adjustable text size
◦ Speech recognition
◦ Specialised pointing devices
Interactivity

Interactivity is the ‘feel’ of the page, e.g.
the feedback given when an option is
selected.

JavaScript can be used by programmers to
make webpages interactive and
dynamic
JavaScript Mouse Events
onmousedown - button pressed
 onmouseup
- button released
 onmouseenter - pointer moved onto
 onmouseleave - pointer moved out
 onmousemove - pointer moving over
 onmouseover - pointer over
 onmouseout
- pointer moved out

Example
Interactivity

A dynamic web page contains
information which will change each time
you visit the page. E.g.
◦ the current date and time
◦ the result of performing a search

Example
Interactivity

An interactive web page contains
information which will change in response
the users actions. E.g.
◦ change of text, or style or image
◦ more information shown
◦ feedback e.g. popup dialog to report an
error
◦ audio or video played

Example