CE206 – Assignment 2
Electronic Submission URL:
https://www.essex.ac.uk/e-learning/tools/faser
Please also see your student handbook for rules regarding the late submission of assignments
On Plagiarism
The work you submit must be your own. Any material you use, whether it is from textbooks, classmates, the web or any other source must be acknowledged in your work. Also, you are assumed to have read the booklet at http://www.essex.ac.uk/plagiarism/docs/Plagiarism_and_how_to_avoid_it.pdf
OBJECTIVE: To develop a live website following HCI criteria and optimised for viewing on mobile phone.
SUBMISSION, ASSESSMENT AND RULES
This assignment counts towards 30% of the overall mark for CE206.
The assignment is to be done individually. This is not a group assignment.
Be sure to put your name and registration number as a comment at the top of all code and other files.
The assignment must be submitted in a single zipped archive containing the following subfolders:
CE206/assignment2/ All html files (.html) CE206/assignment2/images All website image files (.gif .jpg) CE206/assignment2/css All css files (.css)
CE206/assignment2/docs All supporting documents (.doc .pdf .png .jpg .ppt .txt)
Storyboards and navigation diagrams to be in .ppt or .pdf or .jpg format.
Note: please use the filenames as indicated in the task descriptions below otherwise your work may not be marked.
Note: you are free to use any software you like for this assignment, we cannot provide support for packages other than Notepad++, Firefox and Web Development tools (Firefox add-on) on a Windows PC.
DESIGN BRIEF
A live website optimised for mobile phones.
Colin Ritman likes what you’ve done so far but he’s got a number of changes. Firstly, he’s decided he wants a full website, not just a single page. And not only that, he wants it optimised for mobile phone users and accessible to users with visual impairments.
[Review the design brief from Assignment 1 if you have not done so already.]
The objective of Assignment 2 is to create a live website for Colin which can be visualized and navigated using both a desktop / laptop computer and an iPhone or similar device with a small screen. You can do this using liquid design, adaptive design, or responsive design.
Your website should focus on Colin’s skills and experiences to enhance his chances of getting a job in a computer games company, either directly from an employer, through an agency or through freelance work. For example, you could use the website to show off his familiarity with the history of the subject and any interesting or novel technologies he works with (imagine what the technology Colin is working with in 2019 and what is of value to employers). You may use all or parts of the design you developed for Assignment 1 or develop something new.
Minimum Requirements
The site you will design and implement will need to have at least the following:
In Task 1, you will reconsider the user experience design and TEST a wireframe prototype of the entire website you plan to build.
In Task 2, you will DESIGN a website for Colin. You will design the look and feel for at least 2 pages (the homepage and at least 1 inner page) visible at least with two types of screen: a 960 pixel width screen, and a phone screen with a maximum width of 480 pixels.
In Task 3, you should IMPLEMENT in HTML and CSS the liquid, adaptive or responsive design that you proposed in Task 2. Any images must credit the source. Navigation links should follow the site architecture and site text should be real. Your pages must have:
multicolour images on each page
at least 5 styled navigation links
at least 3 external links
suitable coding for accessibility
In Task 4, you will DEPLOY your website to the University server.
In Task 5, you will automatically EVALUATE your website and list changes that will improve your website in order of priority. You will also self-evaluate what you have learnt in CE206.
TASK 1: User requirement review
Review the design brief from Assignment 1 and the requested changes made by Colin above. Based on this you need to specify how the information across the website will be structured. It is a good idea at this stage to produce a site map. In CE206_assignment_2.doc, define the sections of content, what they are used for and what name you will give them. Create several paragraphs of real text for each section of content. Lorum ipsum text MUST NOT be used as this will be a real website.
In addition you need to prioritise certain types of users who will access the website and why. You should create new user personas, user stories and user journeys to define their user experience. You should also create a prototype website. This is covered in Lab 5. You may simply copy in digital copies of the paper- based work you have done or you can write it up as a report.
TASK 2: A liquid, adaptive or responsive website design
Your first task is to consider what the design theme will be and which areas of content you will focus on for the website. Search around the web for websites that will offer you inspiration or have a look at http://designmodo.com/responsive-design-examples/. You may also use some of the design ideas you had from Assignment 1 but you need to show you have researched some different ideas that focus on mobile presentation. List these websites and your thoughts in CE206_assignment_2.doc under Task 2.
Based on this research you need to create a liquid, adaptive or responsive design for your website, including choice of fonts, layout, colours, imagery, etc, using a storyboard. This is a visual representation of the design choices you have made, either as a page mockup or written details of the design and layout. You must show a design for at least 2 pages. Your website must display well both on a standard 960 pixels desktop screen and on the original iPhone display of 480 pixels width at 163ppi without horizontally scrolling (i.e., the maximum width is 480 pixels). You can create these on paper and add images to the CE206_assignment_2.doc or this can be done in PowerPoint and saved as images and imported to CE206_assignment_2.doc. In this document you must also indicate why you have designed the page the way you have.
TASK 3: CSS-based website
For this task, you will implement your design for the homepage (save it as index.html in the "root" level folder, i.e., /CE206/assignment2/) and the inner pages using an external CSS file (called assigment2.css and saved in the CSS subfolder). Refer to Lab 5 HTML examples to get started. You may reuse elements of code from Assignment 1 or develop new code.
The crucial point is ensuring that your site fits both a desktop screen and a mobile phone screen. For this stage, use the Firefox Web Developer extension to resize your screen to 480 pixel width. Your design must not scroll horizontally and should be optimised for minimum data transfer.
The pages must take the following aspects into account from an HCI point of view:
the correct type of graphics files for the images you want to show
suitable font types and sizes
appropriate use of colour (including suitable colour depth and issues related to colour- blindness) and contrast
functional navigation based on a linked unordered list
external links to other web resources
avoid text in graphics
add suitable text tags to hyperlinks and embedded images (for users with restricted vision)
include copyright and updating information
You may use suitable imagery from the web but you MUST credit the source (do this by adding an HTML/CSS comment next to where you add the image). Navigation links should follow the site architecture and any site text must be "real" as the site will be live.
In addition, your site should take into account the recommendations for mobile usability discussed in the lectures:
avoid functionalities like moving animations
limit content on each page
plan your navigation carefully
You are encouraged to explore using interactivity by incorporating JavaScript libraries that will enhance the mobile user experience; however, you must document what you are using and why (in the HTML code comments) and you must ensure that the website it accessible to all ie there must be a non-interactive equivalent in place should the user not have JavaScript enabled.
Your HTML and CSS code MUST contain comments explaining what the major parts of your code do. The code should also be properly indented and not contain any "junk code" (this is commonly produced by Visual Studio for example). Your design should work for Firefox 64.0.2 however do check it in other browsers such as Internet Explorer or Safari.
TASK 4: Deploy your website to the University server.
See the instructions for copying files to the University server in the lab instructions. You must only deploy to the University server. You may convert your website to a PHP/MySQL implementation if you wish.
TASK 5: Evaluate your website and propose changes.
Now the website is live you should be able to test its functionality using a number of automatic tools. Choose a suitable metric to evaluate the website for at least two of the following evaluation areas (see Lab 6 for examples of how these can be tested):
Strategy
Usability
Style
Content
Search engine optimisation
NB: Some of these tools mentioned in the lectures/labs require the site to be on a publically-accessible web domain which this Assignment does not require you to do. Therefore focus on using tests that only require a file upload.
In a table, list your evaluation metric, the result your website achieved, and what you need to do to improve your evaluation score. Also, indicate on the table the order in which you would fix these issues and write a short paragraph explaining why you prioritised the list in the way you did.
NB: Consider Krug’s advice when it comes to improving the usability of websites:
Do the least you can do…
Tweak don’t redesign
Take something away rather than create something new
You are not required to change your website, only to indicate what changes you would make. Finally, perform the same online talent tree you completed in Lab 1: http://www.dungeonsanddevelopers.com/
You do not need to add your name into the talent tree. You will not be assessed on what you submit, only that you do submit something. In the final section of Task 5 paste a screenshot of your current talent tree next to your original one.
MARKING BREAKDOWN (out of 100%)
Task 1. User requirement review (10%)
Suitability of design for good HCI
Navigation
Task 2. Website design (10%)
Suitability of design for good HCI
Navigation
Layout
Colour and contrast
Aesthetics and imagery
Quality and detail of storyboard
Task 3. CSS-based website pages (40%)
Functionality:
Site working and code quality
HCI suitability of the desktop version:
Navigation
Use of fonts types, colour and contrast
HCI suitability of the mobile version:
Navigation
Use of fonts types, colour and contrast
Design aesthetic:
Layout
Imagery, etc
Task 4. Deploy website (20%)
Website deployed to University server
Server-side technology used
Task 5. Website evaluation and self-evaluation (20%)
Evaluation areas tested
Prioritisation of usability modifications
Self-evaluation submitted
