On the exam in the course TDA493 - Graphical Interfaces at Chalmers University of Technology, everyone had the assignment to individually design a high-fidelity software that users can program lights and lamps before and during a music concert. The software could be a desktop application or an application for a touchpad. I chose the desktop version since it offers high complexity, such as fingerpointing precise, tool-tips, dynamic visual hinting pliancy, double-click and bigger screen.
We had approx. three weeks to complete the assignment.
PHASE 1: RESEARCH
Since I did not have any prior knowledge of softwares like these, I researched a lot about how lights were used during music concerts. I also did a field study at Chalmers sound and picture committee called Ljud- och Bildgruppen LoB.
I interviewed a student that have some experience in programming lights. I asked open questions to get more information on important functions and the flow of programming lights.
Lights during a concert by Ljud- och bildgruppen at Chalmers.
After the research phase, I gathered the data from field study and interviews and made them into requirements. I analyze the requirements and ranked each requirement from 1 to 5, where 1's are low prioritized (because of time restraints) and 5's are highly prioritized.
I brainstormed and sketched some ideas based on the highly prioritized requirements. I also conducted some short co-design sessions with my classmates in small focus groups. My aim was to get quick feedback on my design choices.
PHASE 2: ANALYSIS & IDEATION
Source: twenty20 / @welarts
PHASE 3: PROTOTYPING
The two remaining weeks were all about prototyping and designing a high-fidelity prototype. The advantage of working entirely alone is that decisions about colors, layout etc do not take long. The disadvantage of this, however, is that the decisions you make may not be the most optimal because you have not had the chance to ideate with someone else before making such decisions. Below is the end concept of a desktop application called DeLightful. DeLightful is a sovereign posture, with inspiration taken from the Adobe programs - aesthetics and work environment are quite similar to Photoshop.
This is how it looks like when starting DeLightful. No Lights, no Effects and no Sequences.
There’s a Top Navigation Bar with File, Edit, View, Window and Help. Open one of the cascading menus to see more options.
In File, you can create a new project, import an existing project from your computer, and also Open Recent with the 10 latest projects.
The user can create Effects by clicking on the +-button in Effect Boxes panel. The user can also add new Lights in the Lights-panel.
DeLightful supports rich inputs because it uses direct mouse manipulation and accelerators such as the metakeys CTRL+Z (undo).
The timeline is waiting for lights and effects. Right now, it's empty.
The tools in the toolbar are grayed out since the user need items to interact them with.
Effect boxes are in different colors to show what light colour they are in. The selected ones are highlighted in cyan.
Adjustments let the user adjust specific effects in terms of colors, intensity, beam width and direction.
The timeline now consists of sequences of lights and effects.
.jpg)
The sliders indicate the boundaries of integers.
A fly-over-hint will appear when a failed input has been made. The fly-over-hint shows boundaries (e.g 0° - 360° in Beam WIdth) that are acceptable.
For the more structured one, the user can choose List View instead of Grid View if they prefer. Just click on the Toggle Buttons.
While dragging a light or an effect box, the user will see insertion target showing where they can put the boxes.
.jpg)
This is the Stage View-tab.
This is a cube view, where the user can change perspective by rotating the cube or clicking on FRONT, TOP or RIGHT. They can also rotate the cube by clicking on the corners/edges.
The Lights are in three different colors. The colors act as status - just like the status under Grouped Sequences, Individual Sequences, Grouped Lights and Individual Lights.
.jpg)
The Stage View allows the user to see where the Lights are located in a 3D room (if they have Imported the hardware when they created a new project the Lights will be located the same place as if the hardware were. But, if not - they will automatically arrange for the user, and they can move them by left-clicking on a Light).
.jpg)
A photoshopped image of how DeLightful looks like in work.