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 Website = a single document (html file) = 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 What the Tag identifies <html> Start and end of HTML file <head> </head> Start and end of the heading section <title> </title> Page title <body> </body> Start and end of the content of the page <hX> </hX> Headings numbered 1-6 <i> </i> Italics <center> </center> Center alignment <p> </p> Paragraph
More HTML Tags Open Tag Close Tag What the Tag identifies <u> Underlines the text <b> </b> Makes the text bold <br> Starts a new line in text <a href> </a> Adds a hyperlink to another webpage <img> 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 – http - HyperText Transfer Protocol - www.bbc.co.uk - news/Scotland/index.htm – leads to the file Protocol Domain name Pathname
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 images foods finest resources specials.htm price_list.pdf fish.png cereals.bmp frozen.htm fresh.htm
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 Also called “tree navigation” Fast movement between pages Easy to add pages to
Navigation structure - Web Level 1 Level 2 Level 8 Level 5 Level 9 Level 3 Level 7 Level 4 Level 6 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:- Search web pages for different words Create an index (list) of the words and the pages (URL) that they are found on Search the indexes using the words that the user entered 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: MUST take target audience into account when designing the user interface of an Information System (13+) teenagers and adults
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 Margherita Pepperoni Meat Feast Enter pizza choice: Cheese and little fi|
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 making the website usable by everyone all abilities A A A Readability About 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 onmouseup onmouseenter onmouseleave onmousemove onmouseover onmouseout button pressed button released - pointer moved onto - pointer moved out - pointer moving over pointer over 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