INTERFACE / INTERACTION DESIGN

  • 407
  • 27
  • 1
  • Interface Design
    TV: Keyword guided Channel Surfing
  • This is a user interface study to find different approaches for channel surfing or zapping on your TV. The current TV not only provides an ever growing amount of programs to watch but also different sources to watch programs from. Ranging from regular tv channels via cable, satellite etc. but also previously recorded shows, video-on-demand and the internet. 

    To allow people to keep flipping through programs mindlessly without consciously having to select a source, we introduced the follow keyword-based channel surfing concept.

    Some of the text in the concept is in the Dutch language, as a general rule everything on a red background is program or channel information (except for the time), the yellow text on black background are the keywords.
  • Online Grocery Shopping: A Tag based Interface

    In short, this interface turned out to provide a playful way to browse around items connected by tags (in this example do your online grocery shopping). But the design process was a little more complicated.

    This interface is part of project that aimed to find new ways to interact with products in a supermarket. My observation was that there are a lot of ways in which the supermarket can communicate towards the consumer or influence the consumers behavior, but there are limited means for the consumer to personalise their shopping experience or respond to the supermarket. For this concept I focused on digital grocery shopping (ordering online) trying to give consumers a voice by allowing them to tag products to their own taste (and eventually allowing them to share these with friends/family), but I also attempted to keep the interface and interaction playful and fun.


    Below you can find demo movie, but you also try the flash prototype out  
    here

    BUT HOW DOES IT WORK?
    To get started simple type a capital A in the 'Type here _' box and click the green sphere. This will provide the tag (in green) with the letter 'A', now click the tag and all the products (in blue) associated with 'A' will be displayed. If one of the products is clicked it will display all the tags associated with this product, and so on, and so on. Product can be re-positioned by dragging the box (representing a product) around. Tags can be added by typing in the 'Add new tag _' box and clicking the green circle to confirm.