Unit 23 - Herefordshire and Ludlow...
Transcript of Unit 23 - Herefordshire and Ludlow...
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.