Conceptualisation

Posted on October 20th, 2021

Part of Notes on Software Design

Moving from analysis progresses the contextual information gathered into a conceptualisation. Basically, we're starting to make something tangible.The design phase is always addressed in an iterative approach.

There are two main areas of conceptualisation: conceptual, trying to capture what the product will do and how; and physical, the details of the design, structure, layout etc.

Prototypes

Simply, prototypes are a tangible representations of a solution. They are the first representation of a system for the client to accept/decline your concept for the solution.

Fidelity

Prototype fidelity describes how closely the prototype conveys the look-and-feel of the final product: low is simple, high is complex.

Low-fidelity prototypes allow designers to conceptualise layout, structure, interface, etc., early in the process. They are cheap and quick to produce, e.g., wireframes.

High fidelity prototypes match the look and feel to the final product closely/entirely, allowing designers to test the content with end users and collect direct feedback. They are high-cost, meaning they are produced later and to be refined and reused.

Compromise

All prototypes involve compromises; for software-based prototyping, this could affect functionality, appearance, or performance. There are two types of compromise: horizontal, having a wide range of function but little detail; and vertical, the opposite.

Choosing the right type of compromise is important to attain more/better feedback from the client. Users with more domain knowledge than technical would most likely benefit from vertical prototypes; they understand the content but the functionality is their downfall (and vice-versa).

Storyboarding

Storyboards visualise a process in the application, often extending a scenario, allowing designers to address fundamental aspects of the concept such as:

• Will Roger be able to read that text?
• We have lots of users who are afraid of new technology; will the interface scare them?
• What happens if they don't have a bank account?
• They're experienced users, will they be satisfied with a step-by-step approach?

Wireframes

A basic representation of the functional elements in a design concept, such as the layout of a web page. Their quality can range from a 'back-of-an-envelope' sketch to a full design, intended to provide an early approximation of how a user will interact with the system. There are different types:

• High-level
  • Structure without content
• Flow
  • Demonstrate the flow of a single task
  • Requires multiple wireframes
• Modular wireframe
  • Demonstrate the flexibility/changeability of the interface
  • Individual components can add/move/delete
  • Re-arrangeable to try different layouts

Tools for creating wireframes include invision or moqups.