Unit 23

QCF Level 3 Extended Certificate

Unit 23

Human Computer Interaction

HCI – thought for the week!

No matter how much data you add to your

laptop, it will not get heavier..

Previously

• We completed HCI principles

• Designed two interfaces for given

specifications using different inputs and

outputs, for assignment 2.

Now

• Build the interfaces.

• Test the builds

• Document the development

• Evaluate the solutions

Assignment 3

• For assignment 3 you are now required to

implement, test and document the designs.

Build P4

• P4 says to

• Create input and output HCI’s to a given

specification.

• We will implement the designs from

assignment 2.

Build P4

• To build specification 1 and be able to test it

etc. we need to do a few things.

• Using Visual studio 2010 -

• Create an ASP.net web application (using .net

framework 3.5) and Visual basic.

• Learn how to pass data between web pages

• Using vb code in the code behind page(s),

• Here we can use session variables.

Passing data between web

pages.

• In order to pass data between web pages

there are a few ways this can be

accomplished.

1.URL (limited to 255 characters)

2.Database (Unit 27)

3.Session

1. This is what we shall use.

Session Variables

ASP.NET session state enables you to store

and retrieve values for a user as the user

navigates ASP.NET pages in a Web

application, i.e. to pass data between web

pages.

Session Variables

• HTTP is a stateless protocol.

This means that a Web server treats each HTTP

request for a page as an independent request.

The server retains no knowledge of variable values

that were used during previous requests.

This is covered more in Unit 27.

Session Variables

ASP.NET session state identifies requests from

the same browser during a limited time window as

a session, and provides a way to persist variable

values for the duration of that session.

By default, ASP.NET session state is enabled for

all ASP.NET applications.

This is covered more in Unit 27.

Session Variables

• To save data to a session variable we write a

statement like this in vb.net –

Session(“Surname") = txtSurname.text

Session Variables

• To restore data from a session variable we

write a statement like this in vb.net –

txtSurname.text = Session(“Surname")

Code such as this is server side scripting

(Unit 27)

Session Variables

• We shall use session variables for

specification 1 to pass user entered data to

the second page so you can pre-populate the

fields ready for printing.

Build P4

• To build specification 2 and be able to test it

etc. we need to do a few things.

1.Create a hosting account on our computing

network; this will host your phone application

so you can run it on a real smart phone. The

wiki contains information on what you need to

do.

2.Need to understand the rudiments of

responsive web design (covered in part in

unit 20)

Build P4

• For design specification 2 we shall use php

as a basis, this is so we can develop the

application further in Unit 27 (make it

dynamic)

• So we only need to create basic HTML for

this specification but we will use phpStorm

(another IDE) to develop the application, this

makes it easier to deploy to the hosting

server.

Build P4

• First activity is to create your web hosting

account

• Follow the instructions on the wiki.

• This will take time to setup.

• Next is Responsive Web Design.

Build Responsive web design

• RWD is a web design approach aimed at

crafting sites to provide an optimal viewing

experience – easy reading and navigation

with a minimum of resizing, panning, and

scrolling – across a wide range of devices

(from mobile phones to desktop computer

monitors).

• We are initially targeting a mobile phone but

our application should look good on a tablet

as well.

Build P4

• You have covered some of this in Unit 20

Client Side Scripting.

Build Responsive web design

• There are online tutorials –

• http://blog.teamtreehouse.com/beginners-guide-to-

responsive-web-design

• http://coding.smashingmagazine.com/2011/01/12/guideli

nes-for-responsive-web-design/

• http://www.fastnetwebdesign.co.uk/blog/using-twitter-

bootstrap-to-create-a-responsive-web-design-rwd-for-

joomla

• http://www.onextrapixel.com/2012/11/12/how-to-use-

twitter-bootstrap-to-create-a-responsive-website-design/

Php Storm

• Php storm is an integrated development environment for

building (crafting) php web pages.

• The ide includes an ftp so you can easily upload your

built pages to your web hosting environment.

• Once confirmation of your web hosting is established

then we need to configure the ftp in php storm.

Php Storm

• Follow the instructions carefully (on the wiki) to configure

the ftp in php storm for your web hosting site.

Assignment 3 P4

• You are now in a position to do P4.

Documentation

All solutions must be documented and there are

different ways to do this.

Storyboards is clearly one part of this but there are

also structured charts (amongst others), these show

business rules and how/where they are

implemented. Picture diagrams can also be used,

click this link to see

http://www.technologystudent.com/pdf4/richyl.pdf

Documentation

Structured charts are hierarchical and are used to

display a breakdown of components to a reasonable

level of detail. This means for each web page and

the functions it contains with a reference to the

specification.

You will also need to document the development

platform and version, the language used and

version of your solution.

Documentation

• For example - Structured Chart

Documentation

P6 asks you to bring together all of the

documentation for the design and development of

the HCIs in a structured and manageable format.

You will need to copy the storyboards already

produced (for both designs – final annotated

storyboard will do) and then add a structured chart

for each design.

Testing

Basically there are two categories of test that can be

done.

1.Quantitative (I liken this to white box testing)

2.Qualitative (I liken this to black box testing)

Quantitative Testing

Quantitative tests can be measured or assigned an

actual value. This is sometimes called Usability

engineering in the HCI world.

So how long (in seconds) does it take to login in or

How many clicks of the mouse are needed to enter

data into a page etc.

Quantitative Testing

Usually there are usability specifications given which

provide a measuring concept and method.

For assignment 3 you will have to create your own

measures and methods.

Quantitative Testing

You will need to record –

1.What you are measuring (concept).

2.How you are measuring it (method).

3.Worst case (unacceptable outcome).

4.Planned level (expected outcome).

5.Best case.

This is best done in a table with thumbnail

screenshots as evidence.

There is a standard – ISO usability standard 9241.

Quantitative Testing

What to test –

1.Input speeds

2.Comparative costs,

1. Is it a fast and efficient process compared to manual

processes such as telephone booking?

3.Comparison against original needs.

1. How many features are included

2. How many are partially included

3. How many not included.

4. Does it meet the needs of the client/user.

Qualitative Testing

Here the measures are subjective, they are

measures where no values can be given.

Here we need to measure –

1.Effectiveness

2.Efficiency

3.Satisfaction.

4.Meet the business need. (fulfil/exceed the

specification)

5.Is there a return on investment (ROI), is it based

upon need and not nice to have?

Qualitative Testing

This is usually best achieved using surveys or

questionnaires (feedback forms).

For assignment 3 you will need to create a feedback

form for classmates to complete using your interface

as the source.

Testing

Testing forms part of an iterative process –

Design

Evaluate Build

Implement Test

Testing P5

For assignment 3 P5 you will need to test your

builds (P4) –

against original specification,

working on build developer tests(working

within a closed systems, quantitative)

user testing (working in wider system,

qualitative) and to record your tests with

evidence, (user feedback form).

Testing P5

Test plans, here is a sample of a test plan.

Date Test

Number

What is being

tested

Expected

outcome

Actual

outcome

Evidence

screen

Shots?

Finally

• Teaching is now complete (hurrah!)

• Now you can complete assignment 3.