3.3 Designing the Visual Language

One of the main challenges in creating software products is developing the visual language. User interface design is a cross functional discipline that encompasses areas such as interaction design, visual design and information architecture. When developing a design language, it is of utmost importance that harmony is maintained across the whole spectrum of interface design. Harmony, both internal as well as across, is to be conserved at a macro level with a coherent visual language and obvious information architecture, down to the micro level where consistency among knowledge representation artifacts such as icon labels, module codes and colour indicators come into play. Discrepancy among any of the variables spread across this spectrum would result in reduced usability of the end product. A successful act of balancing in these results in a user interface which is easy to access, understand, and facilitate user activity. These principles are encapsulated by creating a design philosophy which employs a common lexicon of terms to describe the various concepts that occur throughout the system.

3.3.1 The visual language

The school of thought in user interface design recently bifurcated with the advent of so called flat design. [Allan 2012] [Schiff 2015] Both comes with their own precepts on how a design aesthetic is to be envisaged. Combining my previous experience in the industry as a user interface designer and in the light of detailed analysis of the two schools, the approach that I adopted here is a synthesis of ideas from both worlds. It is an optimum which can be found between the two styles by appropriating the styles to the right context. The approach adopted in this project is as follows: The apps use shaded look that is characteristic of the old design aesthetic for all interactive elements. This is done with the idea in mind that all elements that are pseudo-3D in their appearance would attract user interaction since they indicate a sense of depth which is characteristic of real world objects. [Apple 2002] This is juxtaposed with a flat aesthetic for elements that are purely graphic visualization of data but doesn't afford any interaction. The logic behind this is that the user would be able to quickly predict which elements are interactive and thus adheres to the principle of least surprise. [Raskin 2002]

A user interface is much more than meets the eye. As a matter of fact, Donald Norman, a pioneer in user interface research outlines a set of principal heuristics on his website that are widely used in the industry to improve the usability of an application [Nielsen 1995]

Notes to self

Need more support for the usability area.

3.3.2 Usability first

ISO9241 [ISO9421] define usability as:

"The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use."

Seen in this light, the design language's main goals were in maximizing usability. A more detail analysis is available in the methods section but to give an brief illustration of how design tradeoffs were made, it can be seen in this image from one of the apps designed for this ecosystem called ProgressMate that the irrelevant details were relegated to the back and only the details that mattered were brought to the forefront.

Provide detailed discussion of the example.

One other thing that I have followed throughout is to minimize the requirement of user interaction with the elements on screen and making it intentionally harder when the action is a rare one. Even thought one additional click might only amount to half a seconds delay compared to one, this when conducted by 4000 users doing it 10 times a day results in 4000 * 2 * 0.5 = 5 human hours on a large scale. This amount of time lost only due to an overlooked aspect from the designer's side in alarming. Hence, considerable attention was supplied in putting the relevant data first and hiding away the irrelevant. A detailed analysis would reveal that this principle has not yet been fully achieved yet, but I have strove for such accordances wherever possible.

A corollary that falls out from this decision is that actions that which are not used frequently are hidden behind two step actions. Even though the experience derived by the user is largely visual there are a lot of critical invisible parameters such as responsiveness of a user interface plays a considerable role in determining how the user experience is impacted. When it comes to the visual user interface, the possibilities of representations are almost only limited by the imagination of the designer. Since this project attempts to create a suite of apps directed towards student learning, it was of high priority that two factors were given main focus: Primarily, it had to be ensured that no time of the user was wasted and secondly that there was a coherent narrative spread through the app and how it is all connected together.

3.3.3 Coherence over Consistency

The design methodology adopted for this project outlines a unification of the design using a consistent visual design language as proposed by the style guides like that of Google and Heroku [link] [link]. I have found from my experience over the such guidelines while hinders the creativity of a designer. Since what is being created here is a platform I had to ensure that the future is kept in mind and all that this platform sets out is to have overall coherence. That is coherence outweighs consistency.

Where possible consistency has been brought in, but it felt like a better choice to make room for new design elements since a fuller understanding of the ecosystem gained by observing usage patterns after this ecosystem goes into production can only yield understanding at this understanding. Only a preliminary understanding of this has been achieved so far and it was most sensible to leave it open. This allows new design elements to be incorporated into the system at a later stage.

A system was to use a cogent visual language that covered the whole spectrum of the apps. A lot of principles in constructing the systems were borrowed from Design of Everyday Things and the Tufte tetrology. I greatly believe in the concept of personal computing as an amplifier for human reach. And most if not all of the concepts governing the UI has starts flowing having this as the central precept. Inorder to maintain this, the things that had to be done were tight feedback loop. Conceptual Integrity was maintained. Designing with the user in mind.

Each app has a primary colour and a secondary colour for highlighting. The behaviour is made consistent with the help of user interface patterns like the navigation bar on the top.

[Give a sample image here]

3.3.4 Beyond the visuals

There are parameters of the system that something that honours the consistency within the system can be made since there's more than just visual consistency that meets the eye that keeps the system coherent. This is discussed in the following section. Provide detailed analysis of how information architecture has helped define the internal consistency. The discussion section gives a thorough account of the decisions that have been made across the applications in this ecosystem to make the user experience as smooth as possible.