Individual Evaluation (Monday Clinic Mobile Application Prototype)

The application was designed by considering functional, non-functional and business requirements those were given in the application specification. The application design was initialised by refining the application requirements by categorising them into functional, non-functional and business requirements. Then the storyboards were prepared by the team members for the given scenarios where team members were able to put their ideas together. Role of each user was clearly understood at the storyboard sketching as it illuminated some real world examples which made it easier to understand the required functionality of the application. Next the interfaces were designed by the team members to suit the requirements of the system where the team came up with several stages of the interface design which was initially done on paper, then modeled on balsamic to produce the wire maps which gave the basic view of the user interfaces. Next task of the team was to refer mobile interface designs to refine the user interfaces. Later the user interfaces designs were refined and re-modeled on balsamic to produce annotated story boards which were aligned with mobile interface patterns.  Finally the interfaces were implemented on interactive prototype.

Design and Prototyping (High-Fidelity)

High-Fidelity Prototypes, on the other hand, are often deployed with an almost-full set of graphics, functionality (such as usernames and passwords, session variables, etc.) and tie-ins to dynamic data sources. They are very detailed systems that are expensive to create, difficult to change quickly, and usually require more rigid software development practices in order to successfully complete. In fact, High-Fidelity Prototypes are sometimes so close to the final product that they actually become the final product.


Interactive Prototype

So with all those efforts, the final interactive prototype was designed and implemented using Invision prototype building software.

Heuristic Evaluation

Heuristic evaluation is a discount usability engineering method for quick, cheap, and easy evaluation of a user interface design. Heuristic evaluation is the most popular of the usability inspection methods. Heuristic evaluation is done as a systematic inspection of a user interface design for usability. The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").

How to conduct a Heuristic Evaluation?

1. Each individual evaluator inspect the interface alone
2. After all evaluations have been completed are the evaluators allowed to communicate and have their findings aggregated
3. Important to ensure independent and unbiased evaluations
4. Typical session 1-2 hours
5. Evaluator goes through the interface several times and inspects the various elements and compares them with the heuristics

Mobile UI Design Patterns

User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users.

Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms.

Official Developer Documentation of Mobile Operating Systems

Mobile OS manufacturers typically have official docs geared for professionals developing for their platform. These docs often include guides on UI design patterns.

• For Android, check out Android Design’s Pattern section.
• For iOS app designers, see iOS Human Interface Guidelines in the iOS Developer Library.
• Designing for Nokia phones? Head over to Nokia Wiki’s Mobile Design Patterns.

Example Pattern - Composition - Scroll Pattern

Problem
More information is in the page or element than can fit in the view port  You have to provide a method to access this information.
Usually, the OS provides this function. Certain behaviors will occur automatically, but in application design especially, you may need to customize your interaction and interface to work in the best possible manner.

Solution

Scroll indicators may be complete bars, or simple indicators floating over the content. 

(Source: Hoober (2012), p. 11)

Design and Prototyping (Medium-Fidelity) Contd..

Annotated Story Boards

After that we moved into the annotated story boards for more detailed mobile design patterns and for the flow of the interfaces.

Design and Prototyping (Medium-Fidelity)

After sketching the story boards and sketching the interfaces on the papers, the basic idea of the application was generated and then for more detailed mock-ups as the medium fidelity prototypes, we started working with wire frames. For generating the wire frame mock-ups, we used software called Balsamiq by balsamiq.com. Since we had not the licence for the full version, we had to try the web demo instead of having the full functionalised software. But that was very successful and a high detailed rich wire frames could be generated according to the paper sketches. 

Initial Wire frames using Balsamiq (Moday Clinic Mobile App Prototype)

These prototypes are sort of a best-of-both-worlds implementation that allows for a combination of both high-level and detailed views; rapid, iterative changes; and the ability to conduct meaningful user tests to evaluate complex functionality and to help determine system specifics.

Benifits of Medium - Fidelity Prototypes

By combining HTML, CSS, and Javascript (for web applications), we're able to relatively quickly create an interactive example system that is designed to help the client, the development team, and the visual designers better understand the requirements guiding the project. When used as part of an application development project, a prototype can:

Design and Prototyping (Low-Fidelity)

A manifestation of a design that allows stakeholders to interact with it and to explore its usability.

"Prototyping is externalizing and making concrete a design idea for the purpose of Evaluation"
                                                                                                                                      -Bill Verplank-
Prototypes are tangible representations, an attempt to realize any aspect of software content.

Prototypes can help answer questions such as:

1. will the design work properly?
2. Can the design be produced economically?
3. How will users respond to the design?
4. Which approach can be taken to get from concept to product?
5. How an prototyping support product design specification?
6. How can prototyping contribute to better product scheduling and budget planning? 

Levels of Fidelity

The level of "fidelity" of a prototype refers to how closely it resembles the final product. For simplicity's sake, we'll consider three levels of fidelity used for prototypes: Low, Medium, and High.

Low-Fidelity Prototypes have been implemented as a jumbled mass of sticky notes on an office wall; as multi-colored, cryptic scrawling on a white-board, or even as a set of BON (Back of Napkin) scribbles. They're easy to create, inexpensive to change, and are good for providing a basic "high-level view" of the overall system structure.

A low-fidelity prototype can be as simple as a sketch on paper. As an example we used in Monday Clinic Application Prototype,