• Hardware Prototyping
  • Software Prototyping
  • Styleguides and Guidelines
  • Frontend: Proof of Concept

Prototypes can range from low-fidelity in the concept and design phase, across high-fidelity prototypes for evaluation and presentation purposes, to proof of concept of the front-end on the respective target system. These are extremely important tools in our design process - no wonder that we have developed a special expertise in this area.

Hardware Prototyping

When designing interactive products and systems we assume responsibility not only for the visual representation of the screen design. We actually design interaction processes involving analogue hardware components such as sensors and actuators. The optimal input and output elements need to be determined or created, just as their quality characteristics have to be defined according to the given use context. Do we work with touch and multitouch interaction or create a unique haptic moment? Regardless of the type of interaction idea that is developed, it is tested in prototypes by ourselves, our clients and the end users (e.g. usability tests). This allows us to discover weaknesses and recognise strengths.

Our expertise and investigative spirit in the area of hardware prototyping (electrical engineering and programming) has also led to projects in which we develop interactive installations, such as Audi exhibits that make "Vorsprung durch Technik" (progress through technology, the Audi slogan) tangible to trade fair visitors.

For hardware prototyping we implement among others the following technologies:
Arduino and shields, processing, phidgets, sensors, actuators, specific client hardware.

Software Prototyping

Interactive software systems are best evaluated in interaction and not via individual screenshots. Therefore software prototyping at HID is a iterative process intrinsic to design, ranging from a simple click dummy on a wireframe basis to the perfectly representative "look and feel" of a future user interface.

Depending on the type of project, some of the tools we use are:
Balsamiq, Axure, Microsoft Blend (Sketchflow, Silverlight, WPF, WP 7), Flash, PowerPoint, Visio

Styleguides und Guidelines

The best usability engineering and the most attractive interface design is only as good as its scrupulous documentation and comprehensive transfer during the process of implementation. One thing must be avoided at all costs: a loss of quality during the technical implementation of the design by the development team; usually this is due to usability and design being imprecise and difficult to interpret, rather than specifically defined by simple, clear and explicit guidelines. Regarding documentation in the form of style guides we pay close attention to providing our clients with safety and comfort during the development phase. Overarching concepts are described verbally, visual elements are handed over in the form of libraries and layouts are documented with dimensioned screenshots or created directly in the target system as templates.

Since style guides are also always living documents, especially in agile development processes, we develop most style guides as web-based style servers, which can be updated centrally.

In support of quality assurance during the implementation, it is also part of our offer to support the development team of our client in their work during regular review processes.

Front-end: Proof of Concept

An important factor in implementation of usability and design is the perfect configuration of the best possible interfacing between designer and developer. This prioritises technical knowledge and communicative competence so that the collaboration during the implementation phase goes hand in hand with the highest quality.

In our 12 years of experience we have learned two significant things at HID. The usability and design value that were created in the analysis, concept, design and evaluation phases must be protected in a sustainable quality assurance process during implementation. If nothing else, this relieves the strain on the developers, allowing them to concentrate on technical implementation without coming across tricky design situations. This applies to collaboration with the client's internal developer teams as well as with external service providers chosen by our clients to carry out the implementation.

This knowledge has enabled us to acquire technical competency for such transfer. We can therefore determine together with our contractors where the best synergy occurs and take on responsibility up to this individual moment of collaboration in the process. In simple cases this transfer occurs when we deliver graphical templates, while the client takes on all other programming responsibilities. For more complex cases, we offer exemplary programming templates with a selective set of functions, from the graphical user interface up to the separating layer of the business logic on the target system. We hereby not only verify the basic functionality of the design, but also the performance of the user interface on the target system.

The following list should give you an idea of our technical competencies:

  • Hardware: Desktop, Mobile, Embedded
  • Operating systems: Windows, Linux, Mac, iOS, Android, Windows Phone 7, MeeGo
  • Web: HTML 5, XHTML, XML, CSS 3, JavaScript, AJAX, JQuery, PHP, MySQL, Silverlight, Flash
  • Programming languages: C#, C / C++, Java
  • Frameworks: .Net, Qt, WPF