GUI design process – week 2 – Eldia

In this week we had to create a GUI mockup as real as we can and present it in the Friday morning to the faculty. So divided our work between us. Ujjval was responsible for presentation slides, I was designing caretakers device and Yves was designing the elderly device.

In the meantime we come up with the name for our system : eldia.

Here is eldia logo that I designed:

For designing both logo and GUI I was using Inkscape – an opensource vector drawing software. I’m using it since three years now and it has turned out to be very easy but powerful program that I can strongly recommend.

Because we had chosen iPhone to be our prototype device we started to make some test very quickly. For example after first test we increased size of the buttons by 150% percent. And after having some readability issues we decided to drop a text displaying the time of receiving the request in favor of simply displaying how many minutes passed since we received it.

Hah. It was the first time I wrote something in Objective-C (programming language for iPhone). It was very simple program, one scrolling text and switching between several images but I took me whole day to finish it.

Another thing worth mentioning is how many things we had learned or had been reminded about during Niels and Alex lectures. For example in our device we have request and daily schedule displayed on the same screen at the same time. To avoid clutter on the screen we introduced visual hierarchy in our GUI. Request messages are colorful and bigger that schedule entries which helps caretakers focus on what is most important at this moment.

Yves to design interface for the elderly was using Photoshop. I find vector graphics more useful that bitmap graphics while designing GUI because you can always change things (eg.: color, size) what happens many times. Yves had every object on separate layer all grouped in different folders and this system worked for him quite well. Because Yves’ device was designed for people that often have some problems with bad sight you can see that icons are much bigger and contrast is higher.

When we finished our GUI we decided to shot a short video explaining our concept. This was the first time I had used HD (High-definition) footage. Even after downscaling to SD (Standard-definition) resolution the quality was much much better. You can easily read text displayed on the iPhone.

I like two trick that we had used in this video. First one is blurring the screen in the beginning of the video. It was Ujjavl idea to make audience feel like being an elderly person. Second one is starting and finishing each shot in our video with the hand standing still. This way we can fade between screens of our interface easily without doing it on the software side. Enjoy!

The presentation we gave went very well.

Here you can download the slides eldia.pdf.

It was two weeks of hard work. Often we stayed late at school until 9 or even 10pm. But it was definitely worth it! I was tired but happy