Application Structure | Grundlagen Visual Interfaces

This course’s Project was to visualize the application structure of a screened device, and then redesign it in order to improve some aspect of it.

During the course Prof. Constanze Langer lead us through the basics of visual interface design, with information raging from basic design processes, passing through design psychology, up to Data Visualization and how to code and decode information.

Through this once-a-week course, which was one of the few in which the professor readily gave information to the students, lessons and subjects were displayed in a way that helped us in the process of making our project at home. Each class there was a different presentation with topics, tips, and references surrounding Visual Interfaces (and Design in general) that was backed up with comments from both teacher and students, making the classroom an interesting, learning and debating place.

The Project

As a Project, we were asked to choose a screened device that interested us (anything from a bicycle computer, dishwasher machine, heating controls, etc…). We were asked then to learn how it worked, every single aspect of it, because later we had to make a visualization of its Application Structure.

I chose my Samsung Keynote2 e1200i cellphone because it was new, small, and I had it all the time with me. But most of all, I wanted to eliminate all the disgusting options and menus that it had, that I thought were useless. At first.

So I went on and tried to get to know it thoroughly – a quest that took more time than I expected. I had started to write down, application after application, all the sub-elements and menus on my notebook, in order to understand how could I possibly rearrange all this information into one page, make it readable/understandable, and then decide which part was the one I disliked the most so that I could redesign it, when I realized that I had underestimated the little punk.

It turns out this kind of cellphones are still around not only because they’re just cheap and helpful, but because they contain specifically the basics needed in mobile communication. They’re as essential as they can be and that is, in my opinion, as perfect as design can get.

By the time I was finished with transcribing, reordering and trying to fit every little detail the cellphone had in the visualization, it had earned my respect. I had made a very decent, yet dry visualization of its application structure, in which I arranged everything in two different areas. The inner part of the visualization, where the device itself was represented, contained all physical buttons and their uses and navigational aspects. The outer part contained the applications and settings, with every menu and options available (i.e. everything that appears on screen).

Redesign

For the redesign I didn’t feel there was much I could do, but to redesign the visualization itself. Like I said, there wasn’t much to be upgraded application-wise, and I also felt like the first representation didn’t greatly express the beauty of the complexity found in this device. So I improved the visualization.

The hardest part (I thought) was done, because I had already everything written down and depicted. But changing from a tree-based structure to a circular one, while maintaining every bit of information and complexity, was a whole other challenge.

In this redesign, I decided to omit the button/navigation structure and give it an on-screen approach. The visualization is comprised of concentric circles, each depicting a different level of depth: the inner circle corresponds to the first level; the second corresponds to one level deeper, and so on. The biggest circle is the deepest circle, where only the Messages application gets. Each application can be distinguished by color (red for Messages, blue for Settings, etc.). In these color areas, the sub elements that go into a deeper level are distinguished by a different, faded saturation of that area’s color; and elements that don’t go into a deeper level are distinguished with a white line within the area’s color.

I think this visualization allows the reader not only to understand the complexity of a basic cellphone, but it allows, through color-coding, to easily identify how complex or simple each application can be, compared with the others and with the whole.

Conclusions

PDF

Through this simple, yet meticulous project I had the chance to exhaustively get to know my device, learned to get along with Adobe Illustrator and could actively apply and understand how things that we saw in class (e.g. the L.A.T.C.H. structure, design process, etc..). At the same time, the feedback rounds we did between the first visualization and the redesign process was of great use. Seeing what your classmates have helps a lot in understanding one’s own work and flaws; and presenting your work in such a relaxed and constructive environment is key to being open for critics and improvement. For me, that was one of the best things from this course.