Hide menu
Valid for: HT24

Categories

Below you can find information about the different project categories. All project implementations should be contained within a single html-page.

Inspiration

If you are looking for inspiration browse one of the many website design sites such as e.g.

Note: Not all sites that are linked from the collection sites above fulfill the functional requirements stated for the categories below. Select your examples with care.

Project Categories

You can choose to do a project that belongs to one of the three predefined project categories.

Functional requirements. Each project category specifies a number of functional requirements that must be fulfilled by your final implementation. The exemplars you select for your GUI analysis must also fulfill the functional requirements of the project category.

Choose one of the catagories, then decide on a subcategory. The functional requirements of each category are very general, and can be implemented using very different user interfaces.

In order for your GUI analysis to make more sense choose/define a more limited subcategory that belongs to your chosen project category. The purpose of selecting a subcategory is to help you select exemplars that can be more easily compared. See each category for subcategory examples.

Online store

Description: The “Online store” is an interactive web page where the user can browse different items for sale and interact with the their shopping cart.

Functional requirements: the web page should enable the user to

  • Browse the available items. There should be more than one picture of the item and a short product description should also be available.
  • Add/Remove/Edit items from/in the shopping cart
  • View contents of the shopping cart

Implementation requirements: your implementation must

  • contain at least 5 different items with their own “details view”
  • each item must have at least 2 pictures

Example subcategories: clothing store, toy store, food store

Product customiser

Description: The “Product customiser” is a interactive web page the user select various options before buying a specific product.

Functional requirements: the web page should enable the user to

  • View information about various product options (color, size, accessories, speed, memory, etc)
  • Select different product options and see a dynamic representation of the final result
  • See how much the current configuration costs

Implementation requirements: your implementation must

  • have at least 3 product properties that the user can customise

Example subcategories: bag customiser, cup customiser, shoe customiser, car customiser

Example websites

Product showcase with non-standard navigation (PSNSN)

Description: PSNSN is an interactive web page where a specific product is showcased. Animation and movement should be used to make the showcase fun, interesting and spectacular. The product showcase should not look or behave like an ordinary photo gallery or an ordinary web page. All information should not be visible at the same time, i.e. the interface should not show all information at the same time. See example websites.

A product does not necessarily have to be an actual product. It can be the portfolio of an artist, or a museum’s collection, or characters in a story, an event etc.

The purpose of this category is to provide a category where non-standard interactive elements are used, where navigation is not done using cookie-cutter widgets. Check with a teacher if you are have any questions.

The category excludes “ordinary” web pages as this is a course in interaction programming, not web publishing. A long web page where the user needs to scroll to view information does not count as “not showing all information at the same time”.

That being said, scrolling is not forbidden. But interaction must be more than just scrolling.

Functional requirements: the web page should enable the user to

  • interactively explore different features/sounds/images/videos/texts of the product

Implementation requirements

  • the interface should not show all available information from the start, i.e. the user has to interact with the interface to make more information available
  • textual descriptions of at least three properties of the product
  • visual descriptions of at least three properties of the product
  • the main method of navigation must not be scrolling a web page

Example subcategories: choose a kind of product (e.g. beverages, headphones), or another facett that can be used as the common denominator between your exemplars.

You might have trouble finding exemplars/defining your subcategory in terms of the product (like “beverages” or “headphones” stated above). If this is the case you can also define your “subcategory” in terms of the structure of the information you are going navigate in your project.

E.g. if your aim is to make a product showcase of an event you could define your “subcategory” as

  • interfaces for navigating/exploring information using a 2D space (i.e. exploring a map of some kind), or
  • interfaces for navigating/exploring a timeline, or
  • interfaces for zooming in on product details (either visually or conceptually), etc

Example websites


Page contact: Johan Falkenjack
Last update: 2022-11-28