interaction design

Advanced HCI Theory & Methods

Advanced HCI Theory & Methods

The Advanced Human-Computer Interaction module is part of the Masters course and refreshes and develops upon qualitative and quantitative research methods.

There were five assignments in total. The first four assignments involved creating a presentation and/or a report within a team.

  1. Here a study was conducted which gathered data about the perceptual accuracy of throwing different weighted objects at targets while both blindfolded and not blindfolded.
  2. Interviews about people’s daily physical activities were conducted and subsequently analysed and coded.
  3. Research and presentation about diary studies.
  4. Contextual inquiry and work models – this study was conducted within a bakery and one of it’s employees.

Final Project: This was an individual project with the requirement of examining transport and technology. I decided to conduct a study on the acceptance of technology in casual cycling. The study was composed of a short semi-structured interview and a cooperative design approach. This user-centered design approach involved sitting down with the user and giving them the tools to create their desired imaginary bicycle. These tools included a sheet showing a human body and a bicycle, some technology cards and tokens. The user was given the freedom to explore the design space and verbally explain their reasoning for their choices.

Afterwards the recorded videos and images were analysed, with the technologies created by the users being coded into ten themes. The top themes to emerge from the study included Safety, Comfort and Convenience.

Technologies coded into themes

Table of codes from final report

IoT Design – Masters Thesis

IoT Design – Masters Thesis

My Master’s thesis involved the creation of an Internet of Things interface, which I entitled “HomeNodes”. The HomeNodes interface was projected on to to objects. Users could connect objects together using a touch enabled wall interface and by tapping their smartphone on different objects.

The following is a short summary of my project:

  1.  Conduct low-fidelity prototyping sessions with users to explore the IoT design space.
  2. Research existing interactive systems
  3. Construct a prototype
  4. Test with users and use observation and video analysis
  5. Build a list of topics from this analysis that outlines the important design considerations and feedback for my IoT interface.

Video of the system in action:

The following images are version 1 and 2 of my systems. The green elements in the second image are technologies that I added to make the system more scalable. The thesis can be read and downloaded in full at this link. The code will be available on my GitHub.

Version 1

 

Final System (HomeNodes)

Evaluating Experience around Public Interfaces

Evaluating Experience around Public Interfaces

This was the second semester project and involved the creation and evaluation of an interactive public interface. The interface could be controlled using a person’s movement. The project was led by two students and one Research Associate from the Urban HCI Lab. Two quantitative studies were completed with 60 people.

The final version made use of Processing, a gesture control program made by Wout Standaert and a projector. Images and the summary poster PDF can be found below.

FULL PROJECT DESCRIPTION (PDF – 2.2 MB)

Early version

System overview

Leaflet for advertising the user study

Wild Type – Interactive Web Logograms

Wild Typography – Interactive Web Logograms

The course Wild Type – Typography Ex Natura was given as an elective in my first semester of M.Sc. Human-Computer Interaction. The course, offered by Media Art and Design, gave insights into the construction of fonts outside of just graphics, svg and ttf editors. Abstract representations, generative and programmable fonts were among the topics discussed and explored. Processing was used to complete most of the assignments during the semester.

For the final assignment we were allowed to each individually create a language or font system. I created the logogram system “Geks”, which was a continuation of one of the earlier Wild Type projects. The interactive webpage can be found here with more details in the menu:

http://markeisenberg.org/WildType/index.html

NOTE: As of writing, this site does not work fully in Firefox, as it uses a drag and drop function not supported by Firefox.

Wild Type – Geks

Visualization

Data Visualization

For the Visualization course in the M.Sc. Human-Computer Interaction we were tasked with visualizing data in Java and some small parts in C++ and OpenGL.

The final project allowed individuals or teams to choose their own choice of visualization language. I chose to implement a two visualizations of Olympic medalists, a treemap and a dotplot. Both interactive visualizations use the same dataset. The visualization was developed using HTML, CSS, Javascript plus the d3.js library.

The link is live at: markeisenberg.github.io

Medal visualization d3.js

Cinestar Usability Prototype & Evaluation

Cinestar Usability Prototype & Evaluation

As part of the Usability Testing course of my Master’s degree we were asked to analyse a website we felt was not very usable, built iterative prototypes and subsequently do a quantitative usability evaluation.

Our team for the project chose the Cinestar.de website. The first part of the course was analyzing the chosen Cinestar website including picking out violations of Norman’s Usability Principles. Personas were created to explore the potential variety of users of the system.

Persona for cinestar website

Next was requirements analysis, building of two low-fidelity prototypes and then quantitative analysis. Two low fidelity prototypes were made using Moqups.com, each one created by one half of the team.

One Low Fidelity Prototype

To close off the course a mid-fidelity prototype was made and then analysed with users. The mouseflow Javascript library was used to gather visual data on how the user traveled through the website, how long they took and what were the most viewed and clicked sections.

Homepage Mid-Fidelity

Movie info Mid-Fidelity

Ticket purchase Mid-Fidelity

Mouseflow analysis Mid-Fidelity

Foundations Of Interaction Design – First Year (Semester 2)

Foundations Of Interaction Design – First Year (Semester 2)

Introduction

This module introduced some basic Interation Design (IxD) concepts. This included a description of the IxD process which is split into different phases, which are: the ‘Understand Phase’, the ‘Design Phase’ and the ‘Prototype Phase’. Throughout the year these steps were followed, where the aim was to simulate the practice of an actual IxD project, with the exception of a working interactive installation. The topic of the project was ‘Environmental Awareness On The Campus‘.

IxD Process

By using diagrams, keywords and brainstorming, problems with environmental awareness were identified and a topic was chosen for our team. We decided on ‘power consumption on campus’. In order to understand the topic we used IDEO cards. These cards outlined:

  • The use of secondary research
  • Surveying and behaviour tracking methods
  • The importance of first hand evidence (i.e. Photos, Videos)

During the ‘Design Phase’ the IDEO ‘Try’ cards were used. Narratives and storyboards were then made to conceptualize our imagined interactive installations.

Finally, a paper prototype was constructed and filmed. This video, entitled: ‘Battery Hunt’ was then edited and put online.