User Interface Design

posted in: Practical Course | 0

In this week’s session the teams presented their current prototype. I found it interesting to see, how every team chose a different approach. Team Hangry presented a well-advanced frontend with a very pleasant user interface design, that only needs very few refinements. The other two teams had more basic implementations of their frontend that needs more or less work to be put in. My team presented our first mock-up iteration of how we thought our app could look like. This variance of results (as I cannot tell which process every team went through) inspired me to write about the process of user interface design of a smartphone app. In this T3N article designer Nadine Rossa wrote about how design impacts the success of a website, so there is a good reason for thinking about your application’s design.

On Pinterest, I found this process infographic below. If you look for this kind of process illustrations you will find many, but this one was the one I think is the best (and most detailed). As it is designed from the perspective of a design agency it is separated into a left and a right half. On the left are the tasks of the agency and on the right side the client’s tasks. For our projects this can also be seen as tasks we do on our own (left) and tasks we do need (potential) user information and feedback. Every time there is an approval step in the process, we could see this as an increment we can test with our users to gather feedback.

The described process is separated in three big stages. The first one is a very general research stage, which is not limited to user interface design. But from the requirements we can also derive a first impression of how the app may look and from the competitor analysis we can learn what other apps implemented very well or very bad to solve the same or a similar problem as our own. The second stage, the main design stage, begins with the user. As the user is the most important factor for user interface design or user experience it is crucial to understand the needs and expectations. From this user understanding we build our app step by step, starting with the main user route and for the moment ending with high-fidelity prototypes. Only by now, when we have the basic frames of our app we start thinking about details like topography or graphics. In the end of the stage we do have a finalized design. We should have been testing our increments throughout the whole process, but now in a third stage it is crucial to assure that the developed design is just like the user loves to use it. Otherwise rework is necessary.

The whole process described in this infographic is very like the approach we follow in our practical course. Many steps in this process, like the general research, personas or prototypes were already used by all our teams and right now all of us seem to be somewhere in the wireframe phase. Still for a good and complete design there might be some inspiration on how to further develop our prototypes. For example, my team now needs to refine our mock-ups, so we get high-fidelity wireframes we can test with potential users. Still we did not think about our information architecture yet, thus we might need to catch up on that beforehand. Afterwards this process provides us with a guidance on how to elaborate further.

UI Checklist – Source


Leave a Reply

You must be logged in to post a comment.