Hide menu
Valid for: HT24

GUI analysis

The GUI analysis you will be performing in this course is borrows from Competitor analysis and Genre analysis, two methods of comparing precedent design.

Deliverable

Submit your report via Lisam, follow the instructions on the main project page. The deadline for the deliverable is on the timetable page.

Important: In your submitted report, specify how many points you are aiming for.

Points

You can score 1-3 points on your GUI analysis report. See the scoring criteria below.

Note: Due to time constraints, you will not perform a complete GUI analysis in this course, see level requirements below.

Important: In your submitted report, specify how many points you are aiming for.

1 point

  • Analyse two exemplars
  • The Component inventory section should contain the components you refer to from the Implementation of functional requirements section.
  • The Implementation of functional requirements section should describe how the functional requirements for your category are implemented by the exemplar GUIs.
  • The GUI interactions section should describe the details of the interaction with one of the GUI components related the functional requirements for your chosen project category.

2 points

  • All requirements for 1 point fulfilled
  • The GUI interactions section should describe the details of the interactions with two different GUI components related to the functional requirements for your chosen project category. At least one of the described interactions must involve some kind of animation or movement.

3 points

  • All requirements for 2 points fulfilled
  • Analyse three exemplars
  • GUI interactions section should describe the details of the interactions with three different GUI components related to the functional requirements for your chosen project category. At least one of the described interactions must involve some kind of animation or movement.
  • At least two of the three components you describe the interaction for should be related to the same functional requirement from different exemplars, i.e. show how the same functional requirement is implemented in different exemplars. You could e.g. describe how removing an item from the shopping cart is done in exemplar A and exemplar B.

GUI Analysis Report

IMPORTANT: Center your work around the content of the section Implementation of functional requirements. If you are aiming for 2 or more points, also make sure you have at least one GUI component that involves some kind of animation or movement.

  • exemplars: select exemplars that implement the functional requirements of your category
  • component inventory: focus on the components that are used to implement the functional requirements. Tip: Print screenshots and annotate (with a pen) which functional requirement is connected to which GUI component

This means that you should start by outlining the Implementation of functional requirements section, so that you know what to include in the Component inventory section.

Choosing your exemplars

It is important is that the exemplars have a GUI that serves similar functions to the GUI you want to create in your project.

Each exemplar must follow the description of your chosen project category and must meet the the functional requirements of your chosen project category.

Your exemplars will be compared to each other, so find exemplars that belong to the same subcategory. E.g. two online stores that sell clothing for the online store category.

For the product customisation category, a subcategory might be interfaces for customising t-shirts. You may also make these subcategories broader as long as they make sense; e.g. interfaces for customising any type of clothing, or interfaces for putting a product together from parts which then could include both a “build your own mobile phone”-site and a “build your own computer”-site.

For the category product showcase with non-standard navigation you might have trouble finding/defining your subcategory in terms of the “domain”/product e.g. showcase with non-standard navigation where the product is a mobile phone. Instead, you can let your “subcategory” relate to the structure of the information. See the “Example subcategories” section of the categories page.

The difference between an example and an exemplar

An exemplar is different from an example in the sense that an exemplar has been thoughtfully selected as a representative of some category or pattern. An exemplar can be a “perfect” or “typical” example relative to the qualities one wishes to exemplify.

Report sections

Start each section on a new page. Also, do not start the analysis by picking the first web page you come across as an exemplar and writing the table in the Component Inventory section.

DO start by considering different exemplar candidates and what to write in the Implementation of functional requirements section.

1. Description

Description of the functional requirements and your selected subcategory. Also provide names for your exemplars and their URL to your exemplars. Refer to the points section above for information on how many exemplars you need to analyse.

Label the functional requirements e.g. R1-RN (where N is the number of functional requirements), or with short names of your choosing. The purpose is so you can refer to them later in the report.

You do not get to choose your own functional reqirements. The functional requirements should be those found on in the description of your category. However, you can split a functional requirement bullet point from the category description into separate ones in your report if you want to.

Note: The functional functional requirements you list here are for the purpose of analysis of your exemplars. You will be creating a specification for your project implementation later.

2. GUI component inventory

IMPORTANT: Do not start by blindly listing GUI components. Before you start annotating screenshots and writing the table decide what you want to write in the Implementation of the functional requirements section.

This section should contain a table that lists GUI components in each exemplar that relate to the functional specifications of your category.

  • Example report. Note: The example report probably contains more components in the component inventory table than you need to have in yours.

Decide what needs to be included

Gather all group members and explore your selected exemplars, take notes on components, functions and interesting interactions. Exploring and taking notes may lead to you reconsidering your choice of exemplars. Tip: Print screenshots of your exemplar candidates and write on them.

Focus only on components and functions that relate to the functional requirements of your chosen catagory. For the functional requirements, refer to the categories page.

Do not start capturing screenshots and annotating before you have explored your exemplar and decided what to focus on.

  • Divide your inventory into one part per page/reference screenshot and include a reference to that screenshot.
  • Label each GUI component using the same label used in your reference screenshot.
  • Break apart composite components into the widgets they are composed of
  • Give each GUI component a meaningful name (ie. not “Button 1”). Names should be constructed so that you can put them after the phrase “This is the …” / “These are the …”
  • You do not have to list all components, focus on the components related to your functional requirements
    • if you include a component in one exemplar and it exists in another exemplar, it should be included in that exemplar as well

Note: A richer GUI Component inventory could be made hierarchical in order to group GUI components. For this deliverable, use your own judgement in choosing the level of the components you include.

3. Implementation of functional requirements section

Describe which components are used to implement the functional requirements of your category in your exemplars. Use headings for each functional requirement with subheadings for each exemplar.

Important: Make sure to refer to your screenshots so that the reader can understand what you are describing.

Conclude this section of the report by analysing the similarities and differences between your exemplars.

  • Example report. Note: The example report probably contains more components in the component inventory table than you need to have in yours.

4. GUI component interaction section

Detailed description with (partial) screenshots of the interaction with the GUI components that implement functional requirements. Refer to the points section above regarding requirements on the number and kind of interactions to describe.

  • Example report. Note: The example report probably contains more components in the component inventory table than you need to have in yours.

Each interaction description should describe the the interactions connected to a functions listed in the GUI functions section.

  • Before, during, after: Each functions should describe the GUI state before, during, and after the interaction.
  • Interaction labels. Multiple interactions may be possible for a specific functions. Give each interaction a label in order to reference them later.
  • Screenshots. Illustrate all interactions with annotated screenshots. Screenshot annotation does not have to be made in the screenshot itself, and can be text describing the screenshot.

5. Annotated reference screenshots section

Annotate your figures so that you can reference the visible GUI-components. See example report.

  • Example report. Note: The example report probably contains more components in the component inventory table than you need to have in yours.

Important: All figures must be captioned and given a label for referencing (e.g. Figure 1. Main page of Flower Store).

Tools / Tips


Page contact: Johan Falkenjack
Last update: 2022-12-01