UI design is not so much about how an interactive looks but rather focuses on implementing the correct tools in order for the user to successfully accomplish their goals. Because the fundamental principles are so simple, it is easy to forget the basics and stray away from UI design. A strong UI should reflect a balance of good aesthetics and an effortless interactivity which guides the user through their experience.
As mentioned before, each stage that is included in the process of developing an interactive product relates to one another. A user scenario is highly dependent on a user persona to be able to reach its full potential. Where a user persona develops a hypothetical user, a user scenario depicts a proposed situation based on the persona and how they would interact with the product in order to reach a given goal.
The fundamental topics that should be addressed include:
WHO – WHAT – WHERE – WHEN – WHY – HOW
This helps the designer follow a visual navigational path and discover what elements are missing and which don’t work. Therefore, it is important to develop a thorough user scenario in order to create a successful interactive product.
Instructional design revolves around a visual hierarchy which teaches the audience how something works or how to do something. Poorly directed instructions affect the user experience greatly which ultimately makes the product undesirable and useless. It is important to account for the cultural differences as well as the targeted audience to successfully create an instructional design.
The basic design patterns include:
Using the program Adobe Illustrator, creating wireframes and mockups are essential to develop which enables the designer to envision what the final outcome will roughly look like. By implementing the ‘Layers’ tool, it allows the product engineer to slowly build their interactive prototype. Through the use of guides, having these foundations are helpful in ways that are powerfully informative to the designer and their team.
Below is a continued example of ‘How to Make Toast’.
The design process should not be overlooked as it provides the designer with insights to their production. In fact, it is during this progression where they fully develop their existing ideas as well as promoting new ones. Bill Verplank breaks this process down into 8 simple phases.
Error – Idea – Metaphor – Scenario – Task – Model – Representation (Prototype) – Manipulation (Interaction)
Through these early developments, it helps the designer to understand, define and frame what needs to be solved and how to overcome it. For example, using a context scenario allows the designer to observe and comprehend the situation, the people and their needs in order to successfully reach their goal.
First Aid – Red Cross App: Deconstructed
This is a collaborative project based on the First Aid – Red Cross App. As a team, we deconstructed the interactive to understand how all the elements conjoined into one to produce the instructional design.
The Red Cross App provides an inbuilt interactive interface that allows users to react in real time to emergency and disaster events.
The app enables users to choose from a multitude of scenarios and provides solutions facilitated through back end flowcharts which narrow down possible cause/effect and solutions. Below is a link to a short video which introduces the general use of the app.