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