Portfolio

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)

VR Design & Development

VR Design & Development

The following projects were completed as part of the M.Sc Human-Computer Interaction course in Bauhaus-Universität Weimar.

Virtual Reality

This module involved learning about the concepts existing in current Virtual and Augmented Reality. For all projects we used an in-house system called Avango Guacamole to create 3D environments and implemented various interaction techniques useful in an immersive 3D environment. The programming language was through Python. The video shown below is our team of two’s final project.

Behind the Mask 360 (Virtual Reality Design)

This course was an elective and involved the creation of various low-cost virtual reality assets. These assets were often centralised around the Google Cardboard, a cheap VR solution. Early on in the course we were allowed to think of different themes or scenarios where the discussed concepts could be used. I decided on a Sci-Fi exploration adventure theme that would be central to the completed assignments. Multiple technologies were used to create VR assets like photospheres, 3d models and special effects. The below list is a short summary.

  • Google Photosphere, Photoshop and Spherecast (temporary online Viewable VR images)
  • TouchDesigner (3D environment spheres and special effects)
  • Blender, 123DDesign (3D modelling)
  • Unreal Engine (360 3D environment and game engine)

Many of the techniques learned through using these technologies went into the final assignment. Here a 3D environment was modelled using Unreal Engine. Due to the lack of rendering and processing power it was not possible to create a seamless video of the 3D scene. Thus, a 360 viewable video slideshow was edited that showed the most notable spots in the environment. This assignment also involved designing a wearable mask with the Google Cardboard suitable for the Sci-Fi theme. Samples of the work can be seen below. A 3D model of the mask can also be spotted in the 360 video!

Photosphere

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

Magnet Stylus Android App

Magnet Stylus Android App

Mobile Information Systems – Magnetic Stylus Android app

During the Mobile Informations Systems course of the M.Sc. Human-Computer Interaction program, various Android applications were built to explore the different aspects of mobile communication, data retrieval and visualisation.

For the final project our teams of two people were asked to remake a mobile application from an academic paper. The resulting application can be seen below and is using an neodymium magnet.

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

The Investigators Project

The Investigators Project

This project was part of my M.Sc in Human-Computer Interaction and took place between April – September 2016. The project was worked on by more than 15 people, 10 of which were students from Computer Science and Media Architecture. Two workshops were completed with the artist Krzysztof Wodiczko in preparation for the final event. The project was included as part of the Kunstfest Weimar event.

One of my main responsibilities in the project was managing and reconfiguring the WordPress website and writing content. Most of the processes and events have already been documented on the website which cn be found at:

https://www.uni-weimar.de/projekte/die-ermittler

Explanation of the installation

HungryBungry – UX Exploration – Find a restaurant

HungryBungry – UX Exploration – Find a restaurant

During my placement at Mosquito eCommerce in June 2013 I was asked to create wireframes for their up and coming food ordering website HungryBungry. The following images are the wireframes of the the ‘Restaurant Listing’ section of the desktop and mobile versions of the website. Some notes are included about the potential functionality of the website.

List page mockup desktop

List page mockup desktop

Listing Page Mockup mobile

Listing Page Mockup mobile

map page mockup (desktop)

map page mockup (desktop)

map page mockup (mobile)

map page mockup (mobile)

Photo page mockup (desktop)edit

Photo page mockup (desktop)

Photo page mockup (mobile)

Photo page mockup (mobile)