Assignment OBJECTIVE: To develop a simple but attractive webpage using CSS and following HCI criteria.
CASE STUDY - A new profile website for academics at the School of Computer Science and Electronic Engineering, University of Essex
Each academic in CSEE has their own profile page, detailing things such as research interests, industry connections, published papers etc. The Head of School would like all academic profile pages to be presented in a uniform website that highlights the skills of academic staff and to allow students to easily decide which member of staff would be most appropriate for post-graduate research. The website needs to follow the general branding of the University but should look sufficiently different from the existing online presence to make it stand out.
The Head of School would like to see an example academic profile page which should show contain all the sections of information about the member of staff. He would also like to understand the reasons for your design decisions, as well as some evidence that you have improved the design from your original draft before submitting to him.
TASK 1: User requirements and site specification
Read the design brief to get a good understanding of the requirements of the client (Head of School). Search the web for webpages that display similar information to offer you inspiration (and also show what the competition are doing). List these website URLs and your thoughts in a document called task1_research.doc and save in the docs subfolder (see Assignment Rules at the beginning of this document for how and where to save your files).
Based on this research you need to specify how the information on an academic profile will be structured, including its relative importance. In task1_research.doc, define the sections of content, what they are used for and what name you will give them in the CSS implementation.
You will have been allocated an academic member of staff for whom you will build an example webpage. Look on Moodle for the allocation list. Search the Web for this member of staff and compile content that fills in the sections you have created above and save it in task1_research.doc. If you cannot find any information on your allocated academic then select another.
You should now have a document called task1_research.doc that contains the user requirements, site specification and content for the academic profile page.
TASK 2: Website design
Now your site has a specification, search around the web for websites that will offer you design inspiration (they don't have to be profile websites). List these website URLs and your thoughts in a document called task2_research.doc and save in the docs subfolder (see Assignment Rules at the beginning of this document for how and where to save your files).
Based on this research you need to design the look and feel for your website, including navigation, layout, colours, imagery, choice of fonts, etc, using a storyboard. This can be done in PowerPoint and saved as task1_sitedesign.ppt or graphically as task1_sitedesign.jpg. In this document you must also indicate why you have designed the page the way you have.
TASK 3: A CSS-based webpage
For this task, you will implement your design for the profile page (save it as index.html in the "root" level folder, i.e., /CE206/assignment1/) using an external CSS file (called assigment1.css and saved in the CSS subfolder) and content for your allocated academic you researched from Task 1.
The page 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 and contrast
- easy yet functional navigation based on a linked unordered list
- external links to other web resources that are not at the University of Essex
- avoid text in graphics
- add suitable text tags to hyperlinks and embedded images
- include copyright and updating information
You may use images and branding from the current CSEE website, as well as other 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).
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 49.0.1 however do check it in other browsers such as Internet Explorer or Safari.
TASK 4: Website review
When you have completed building your CSS-based website from your original design, you now need to test it in a number of ways.
Firstly, using Fitts's law, calculate how to minimize the delay between a user's intention and clicking on a desired object (be it a menu item or a hyperlink). To this end, do the following:
4.1. Start with your index.html page and the associated assignment1.css file. Calculate the average Mt to go from the centre of the screen to all the links and/or menu items. State all your assumptions (e.g., assumed screen size, dpi, etc.) and all your calculations in a file called task4_fitts.doc (saved in the docs subfolder). You will need to use the following values for a and b in Fitts's equation: a=0.25s and b=0.125s (strictly speaking, the units for b are seconds per bit and b depends on the number of choices, but we will ignore this for the purposes of the assignment).
4.2. Create an new layout (save it as task4_redesign.ppt or task4_redesign.jpg in the docs subfolder) that would reduce the average Mt without damaging the page's functionality and quality of appearance (e.g., do not untidily clump everything together just to reduce D or S). You will need to be creative here.
4.3. Calculate the new Mt. Again, show all your work and assumptions and add them to the task4_fitts.doc file, including your thoughts on the impact of these changes if implemented.
Secondly, you need to gather some opinions of potential users of the website. Design a simple questionnaire of at least 3 questions that may include:
- what do they like about the design?
- what's missing that they would like to see?
- what else would they suggest, e.g., particular colours, layout, etc.?
Show your original design and present your questionnaire to at least five students. Record the participants' age and course of study, but do not record their names (you must tell them that the survey is anonymous). Do some interpretation of the findings and save this file as task4_usersurvey.doc in the docs subfolder.
Finally, consider how you would like to change your design, what limitations are you facing, what CSS techniques do you need to learn, etc. Be honest with your appraisal of your own work. Include these thoughts in the Task 4.
TASK 5: Website redesign
Based on your finding from the Fitts's law analysis and from the website user assessment, detail sensible suggestions and modifications to your original design. All suggestions should be reasonable and be inclusive as possible (i.e. the more constructive comments you make the better). This should be outlined in a document named task5_redesign.doc (saved in the docs subfolder).
Select the suggestions for improvement you feel will have the biggest impact on improving the site and implement them in your design. Only make the changes using a new CSS file entitled assignment1_redesign.css (save in the CSS subfolder) and only change the CSS reference link in the HTML files. You may use new images however these can only be added in the CSS file, not in the HTML files.
The HTML for the original and redesigned website MUST be identical other than the reference to the CSS file in the document head.
Attachment:- Assignment.rar