- Gain experience in studying interaction used on the web.
- Practice precedent design analysis
- Gain insights regarding pitfalls of producing a interaction specification
- Gain insights in how to approach an implementation problem given a specification
Please register your group in Webreg. Each group should consist of 2-3 members.
The mini-project consists of three phases, each with an associated deliverable. At the end of each phase, the deliverable is presented to the recipient group either during class or at a lab session (see dates below).
Project deliverables and project plan
The mini project will take three weeks. The list of deliverables can be found below.
- analysis (deliver during lab session Nov 28)
- specification (deliver during class Dec 3)
- implementation (presentation and demo Dec 17)
Table of logistics
|Group||Members||Analysis||Analysis to||Analysis from||specification||specification to||specification from||Impl|
|1||cass004, annpe207||clothing store||3||14||product catalogue||6||14||product customization|
|2||linta544, emme165||product catalogue||4||13||clothing store||7||11||product customization|
|3||yodem529, johis140||product customization||5||1||clothing store||8||10||product catalogue|
|4||alebr310, oskfr124||clothing store||6||2||product catalogue||9||15||product customization|
|5||carka480, anni913, jimer336||product catalogue||7||3||product customization||10||12||clothing store|
|6||sofli276, madfr972||product customization||8||4||clothing store||11||1||product catalogue|
|7||danto582, felsc926, hanpe473||clothing store||9||5||product catalogue||12||2||clothing store|
|8||saral853, freej101||product catalogue||10||6||product customization||13||3||clothing store|
|9||johri201, marli947||product customization||11||7||clothing store||14||4||product catalogue|
|10||frien722, galosi721||clothing store||12||8||product catalogue||3||5||product customization|
|11||frijo793, albri134||product catalogue||13||9||product customization||2||6||clothing store|
|12||jonda429, freli693||product customization||14||10||clothing store||5||7||product catalogue|
|13||moasa077, samth549||clothing store||2||11||product catalogue||15||8||product customization|
|14||peffa292, sofbe231, chafr402||product catalogue||1||12||product customization||1||9||clothing store|
|15||fraku565, jacga987, freni981||product customization||15||15||product customization||4||13||clothing store|
- The analysis and specification should be handed to the recipient group in paper during at the specified dates.
- Each recipent should review the deliverable together with the group responsible for it.
- As a recipient, use this as an opportunity to ask the delivering group for any clarifications needed to be able to continue with the next phase of the mini project (specification or implementation).
- If you as a recipient feel that there is anything missing from the deliverable, ask the delivering group to revise their analysis/specification.
- If the delivered analysis/specification is approved by the recipient, the team that produced the analysis/specification sends a copy to their TA.
The TA’s role during the mini project is to be a “supervisor” for each group. When your delivery is approved by the recipient, send a copy of the final version to your TA.
- The requirements for each deliverable are available further down in this document.
- Information on groups, recipients and designated product can be found below.
- All projects will be presented and demoed during the lab session on Dec 17.
Analysis — Precedent Design Analysis
To be delivered on Nov 28
Your group will be given a context/domain and a functional specification (see below). Your group will then perform a precedent design analysis and collect examples of different UI implementations of the specified functional specification for the given domain.
Your findings should be presented in a report with annotated screenshots of your collected examples. The report should also contain recommendations to consider in a future implementation. Also include the functional specification you were given for your project analysis.
- Follow the genre analysis protocol described during the lecture and in the original paper.
- The report should contain annotated precedent design examples - at least 3 examples for each item in the functional specification. E.g. if the functional requirement is to display related items, the analysis should contain at least three examples of how this has been done in existing applications/websites.
- The report should contain conclusions and recommendations for the design specification related to each of the functional requirements.
To be delivered on Dec 3
After approving the precendent design analysis that you recieve, use the information in the report, to produce a design specification to be used by the implementation team. Use sketches, wireframes, storyboards and textual descriptions to specify the implementation. The scope of the implementation should be between 1-3 screens depending on the product.
- The specification should have a short textual description (product description, number of web pages, etc)
- The specification should contain annotated visual descriptions of interaction.
- The design specification should specify the interaction to be implemented in detail. Programmers tend to only implement that which is specified.
- The design specification should cover all requirements specified in the functional specification.
- For one of the functional requirements, create and specify an interactive solution that does not appear in the analysis. Make a remark in the specification on which interactive element is your addition.
To be demoed and presented Dec 17
After approving the specification you recieve, create an implementation that follows the specification.
For this project you will not have access to a graphical design team, so you may use relevant or neutral placeholder artwork that communicates a message that does not conflict with the final product to be. E.g. do not use images of flowers instead of clothes, or animated gif background if the final product will not have them etc.
- Implement the design specification.
- The implementation prototype should fulfill the functional requirements
- Improve one of interactive elements in the specification.
- Small deviations from the specification are allowed.
Demos and presentations
You will demo your implementations on Dec 17. The requirements are as follows:
- All group members must participate.
- Bring a paper copy of the final specification.
One group member should be available at all times to present and demo your impementation during the demo session. During the demo session you will switch places so that everybody has a change to look at the other group’s implementations.
Your TAs and the examiner will review the work done by each group and ask each group member questions about the project.
Below you can find the functional specifications for the different mini projects.
The clothing store is an interactive product where the user can browse clothes (or shoes, or jewelry, or other things you can wear) and add them to a shopping cart. In the implementation, severl items must be available to browse through, but all can lead to the same product information page.
- browse items
- shopping cart
- add/remove items from shopping cart
- select sizes and colors
- view closeup of item
- product descriptions
The product catalogue is an interactive product where the user can browse a producer’s products. The user cannot buy products here, just get information about them. The product catalog is more about marketing than actual sales. E.g. a sewing machine producer’s catalogue, or a camera producers catalogue, etc
- browse product series
- multiple product images
- product information: features (with description), specification
- related products
- product showcase - why is this product good
The product customization is an interactive product where the user select various options before buying something. Information on the available options etc should be provided.
- information about various options (color, size, accessories, speed, memory, etc)
- price information
- the ability to change options
- feedback from each change
- dynamic representation of the final result
Responsible for page content: Jody Foo
Last updated: 2014-10-22