The aim of this project is to give you experience in designing and implementing a graphical user interface. As this is a third year course, this project is intentionally more real-world – that is, not 100% specified. You need to use your common sense and can add a list of assumptions and explanations as a part of your hand in.
- Site structure: Design the functional structure of the site to the extent that you will implement it in Task Two. Provide a flowchart as per Lecture 8 and any accompanying text and annotation you believe appropriate to help the marker understand the scope of your site. This should convey the site ‘navigation.’ In your implementation, the user might reach the functions mostly via hyperlinks between HTML pages, or mostly by drag-and-drop, by Javascript pop-ups, or other methods depending on how much DHTML you used. If you use a mixture (which is likely), you might want to annotate onto the flowchart where the navigation crosses HTML page boundaries.
- Visuals: Design the visuals for the site and produce the following:
- Wireframe (Balsamic or similar)
- Font scheme: Describe each font used on the site and its role; with this description give a brief rationale (i.e. explanation of why you made that choice) for each font used.
- Colour scheme: Describe the basic type of colour scheme (e.g. monochrome) and provide the rationale for your colour choices; include a “design eye” (http://designeye2.pixelreka.com/swf/colouringtool00.htm) clip of your colour scheme – see tutorials week 5 & 6
- Lines and borders scheme (including backgrounds): Describe and provide a rationale regarding choices of lines and borders, backgrounds, use of white space and any other methods for grouping, segmenting or giving a particular graphical ‘feel’ to the site.
- Any assumptions you have made: This includes explaining the limitations of the design – what you focused on as compared to what you left out in the interests of time, as well as any assumptions about the user’s goals or anything else might help the marker to appreciate the quality of the design and its implementation.
Report all this as a page called ‘Documentation’ on your site – this page does not have to follow the site style.
Implement the design described in Task One using standardised Web browser technologies of HTML5, CSS and Javascript only; do not use applets, Flash or Silverlight and do not use a database management system (MySQL, Access, etc.). The site should include:
- Home page
- One or more other pages of your choice
- Documentation page (from Task One)
- Usability test including linked highlights video (from Task Three)
Keep the following considerations in mind:
- The site should include some realistic ‘data’ appropriate to the functionality you have implemented. For example, you might include specific types of vegetables and their recommended growing seasons. Your data might be expressed in any of a variety of ways such as tables, drop-down lists, tool-tips and/or graphically. Your data does not have to be comprehensive (e.g. not every vegetable grown in New Zealand), but it should be sufficient to illustrate the interaction (e.g. if a list in full implementation would need to scroll, include enough data to require scrolling).
- You will also need to manage session data in the sense of the user specifying their choice of pots, fertilizers, vegetables, garden layout or whatever elements are in the scope of your design. You do not however need to provide methods for saving or loading user data. I.e. each time you reload the home page the system should know its default data about vegetables to choose from and the like, but it does not have to retain the user’s specific garden design.
- Continue to adhere to the scope limitations of Assignment 2: do not include any sales related functions (no prices, no links to specific product information) and do not include a calendar function (if you address time at all, it should be at the level of months or seasons).
Get one of your class mates to test your site; use the Piazza forum to find a buddy (you can also have a family member or friend do this, if you wish, but please do your part to be available to at least one other fellow student to test their prototype). Record their session with Morae. Correct any usability issues you find and repeat the test. Cut the video in Morae manager to 30sec of highlights (AVI format – please make the file as small as possible, sacrifice quality for size). Briefly report on the findings and corrections as a result of your usability test (1-2 paragraphs).
- Add your usability report with access to the highlights video as a page to your website.
Suggestion: Draw on your personas and scenarios from Assignment 2. Ask the ‘user’ to perform the basic task(s) you specified in that assignment.