Author: Mark

Pixel Feed – News App Concept

Pixel Feed – News App Concept

Team Size: 1 (me)

Type of Project: UI Design for Journalism

Timeline: 1 Week (Hobby Project)

Approach/Idea:

News feed websites already exist in the form of Google news and numerous apps which can take news from multiple sources. I decided to take this concept and apply it to the globally expansive video game industry. Pixel Feed would allow users to curate their own gaming news feed. Each game or franchise could have its own page, where external links can be followed to explore further.

This concept is designed to allow users to streamline their consumption of their favourite digital art forms, from allowing them to buy the game from an online retailer….to watching the top streamers who are showcasing the game.

Tools:

Ideas were sketched on paper first, then later designed in Sketch 3 and lastly given interactivity with Adobe XD. The PixelFeed logos (and some other elements) were created in Adobe Illustrator and Photoshop.

An interactive Adobe XD prototype for the app can be found at: https://xd.adobe.com/view/ecd97046-84dd-4f9d-6822-cc09b7b88f79-9ae8/

If the Online clickable prototype is offline, you can download the XD file here:

https://drive.google.com/open?id=1_yxo3VZ9hAQW5isLY-P_jKTFdrQtU5o4

</a

Additional ideas: Information page, links to online retailers and related information

Logo ideas

Adobe XD Prototype (see link at top of post)

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