Six Circles : A Experience Design Framework

Ish∆n
theuxblog.com
Published in
17 min readJul 28, 2018

--

Six Circles - an experience design framework is a book written by James Kelway. This e-book has explored some of the experience design aspects of digital products which we would not discover in a standard digital agency. This book covers worth discussing context of user experience design areas divided into persuasion, behaviour, visual design, usability, interaction and content.

Experience is a human condition, a mixture of cognitive process and memory. We designers are responsible in shaping how users behave and interact with the given product. Technology has shaped into a different dimensions where we are pushed into how we interact with systems, machines and each other. This has led into the fusion of multiple disciplines which is referred as UX. This is not a coincidence but the necessity which happened due to maturity of technology. This framework has given us six different lenses to forsee any design problem through these circles.

UX can be combined into many different disciplines to make something truly special. UX is a intersection where technology meets the human being, designed for people and not solely producing for consumption.

Six Circles Framework

Persuasion:

Source: Entrepreneur

It is regarded as a subset of UX, but it goes beyond UX and the mechanics of traditional usability. It’s about understanding the emotions that influence people’s behaviour and decision-making, and then acting on that information to design compelling user interactions.Making a rational decision, based on real evidence, consumes a lot of energy in our brains.

As smart as our brains are, they constantly try to find ways to avoid spending energy — or doing real thinking. Instead, it creates shortcuts, that allow us to make quick decisions, that are true, most of the time. Persuasive design seeks to document and utilise our cognitive biases and similar insights from psychology into persuasive patterns so that they can be more easily applied to product design. This is a part of UX design framework that has its roots more in psychology and social science than in design.

  • Entry point: Product and services that are simple to use have much greater power to persuade. The final element is luring the customer/users towards the goal in increments, persuading with images, well written copy and quality call to actions and clear signs. The barriers to the goal is an important element here.
  • Picture Superiority Effect: Picture Superiority Effect relates to the fact that the human brain learns and retains information much better when it comes in the form of images rather than words and therefore visual sources can have a much greater and more lasting impact than text. This is where the phrase “a picture paints a thousand words” comes from. Allan Paivio (1971) explains this principle with the theory of “dual coding”: that we retain images better than words because they are coded twice in our memory. In digital interfaces page layout, advertisment and packaging all benefits from the strength of images to convey meaning as well as the accompanying copy that may be placed alongside. This helps to scan the page rather than reading each lines. It needs to be memorable which makes conveying message more powerful in process of persuasion.
  • Storytelling: Storytelling is an ancient craft, its power is timeless because good stories will always captivate audiences, whatever the medium. UX designers typically tell on-screen stories, weaving narratives to make users invest their emotions in our messages. Vitally, we aim to hook users through their feelings, as opposed to describing our offerings from a functionalist/task-oriented viewpoint. Indeed, good user experience depends on the success of users’ achieving their goals “usability-wise”, but storytelling is the framework we use to reach users. An important factor in story telling stated by BJ Fogg ‘Credibility makes persuasion possible’.
  • Framing: The language that we use to frame a decision process also influences people’s perceptions greatly. By manipulating the way we present information can change how users make their informed judgements and decisions. The place where we find this principal widely prevalent is into social twitter and Facebook facilitates ‘social framing’ A target behaviour can be fulfilled if a user can discern that others are performed the behaviour with them.
  • Influence: According to BJ Fogg’s believers that influence strategy and tactics, not the interactive product, will be the unit of analysis, or the basic building block of measuring success in the future. We need to be recognised as giving values and compete in a manner that gives us satisfaction. Many communities flourish because of these factors. Consider writing reviews, sharing content, being rewarded for loyalty and participating in a forum as activities that holds true personal value to the user in the community or social network.

Behaviour:

An appreciation of why we behave the way we do id integral to designing a good experience. Regardless of what you think about user experience design, as designers we need to pay more attention to how and why we behave like we do, These principles derive from observations and disciplines beyond design. Psychology and sociology are as important within this list which of course is not exhaustive.

  • Cognitive dissonance: Its an uncomfortable feeling caused by holding two contradictory ideas simultaneously. Cognition (thoughts, feelings and ideas) when are in harmony cause consonance. Two unrelated thoughts do cause dissonance.
  • Expectation effect: Our audience of potential customers are at their most receptive in terms of being persuaded when introducing or promoting a new design.
  • Hicks Law: Hick’s Law is a simple idea that says that the more choices you present your users with, the longer it will take them to reach a decision. It’s common sense, but often neglected in the rush to cram too much functionality into a site or application. As a designer, you will use Hick’s Law to examine how many functions you should offer at any part of your website and how this will affect your users’ overall approach to decision making
  • Hierarchy of needs: Maslow’s hierarchy can be translated to design, for which the hierarchy from low to high would be functionality, reliability, usability, proficiency and creativity. Lets take an example of MP3 player and separate its hierarchy:

Functionality: An MP3 player needs to be able to play, pause, rewind and fast-forward MP3 and other digital audio files in order to be considered an MP3 player. If it can’t perform these functions, then the design has failed.

Reliability: If your MP3 player sometimes plays and sometimes doesn’t, then it has failed to meet reliability needs.

Usability: How easily can users accomplish basic tasks? Can the person with the MP3 player easily figure out how to turn it on and off? What about how to play, stop, pause and select a song?

Proficiency: Does your design empower people to do more and to do better? Does the MP3 player allow you to build playlists and easily search through songs? Does it provide an easy mechanism for downloading songs from the Internet and transferring them to and from other devices?These are proficiency needs.

Proficiency: Perhaps your MP3 player teaches music theory by making recommendations based on the musical structure of the songs you listen to most, and it provides chord charts and notes that play visually in time with the audio. Your MP3 player might allow custom skins or allow you to combine parts of songs to create new music.

  • Immersion: It’s is not exact is the field of science but perhaps more of an art. There is not a formula for an immersive experience that will be success. Sensory experience coupled with cognitive engagement seem to provide best type of mix. So getting the balance right with the mind of the user being actively engaged is the answer to truly immersive quality experience.
  • Mental model: The slower processing of ambiguous sentences is one area where mental model research is relevant to interaction design, as interaction designers are, among other things, interested in measures of learnability and ease of use. In this respect the notion of mental models has applicability and explanatory power. The use of mental models in this sense was popularised in the HCI and interaction design community by Donald Norman in his book “The Design of Everyday Things” (Norman 1988). In his book, he used mental models to describe how a system is designed and implemented on the basis of the designer’s mental model. Similar to a reader of a passage of text, the user develops a mental model of how he/she thinks the system works through interaction of the system.
  • Performance vs Preference: One of the main tenets of most company-sponsored quality programs is that the customer is always right. Designers frequently evaluate the goodness of their systems by simply asking users whether or not they like the interface. The fallacy of this approach is that users generally make judgements based on their “preferences” and tend to ignore the more important performance issues. System designers frequently use their own preferences to make decisions, and then make major inferences about how users will perform with their system.It is proposed that better user interfaces are possible if we clearly separate the performance and preference concepts, recognise the limitations of each, and work to optimise one or the other.
  • Recognition over Recall: It’s easier to click and choose from a variety of options than to write out those same things from memory. Recognition tasks provide memory cues that facilitate searching through memory why it is easier to recognise things than recall them from memory. It’s easier to provide a correct answer for a multiple-choice question than it is for a fill-in-the-blank question as the multiple-choice questions provide a list of possible answers1. Open-ended short answer questions provide no such memory cues, why the range of possibilities is much greater. Recognition doesn’t involve origin, context, or relevance. Recognition memory is much easier to access than recall memory. While recognition memory is obtained through exposure, recall memory is obtained through learning. Recognition does not necessarily involve memory about origin, context, or relevance while recall usually involves some combination of of memorisation, practice and application. Furthermore recognition memory is retained for longer periods of time than recall memory — it is harder to recall the name of an acquaintance than it is to recognise it when heard.

Visual Design

Visual design aims to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal. To help designers achieve this, visual design considers a variety of principles, including unity, Gestalt properties, space, hierarchy, balance, contrast, scale, dominance, and similarity. As such, it focuses on the aesthetics of a product and its related materials by strategically implementing images, colours, fonts, and other elements. A successful visual design ensures that content remains central to the page or function, and enhances it by engaging users and helping to build their trust and interest in the product and brand.

  • Aesthetic usability: Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems and can prevent issue discovery during usability testing. Identify instances of the aesthetic-usability effect in your user research by watching what your users do, as well as listening to what they say.
  • Alignment: Alignment is the placement of visual elements so they line up in a composition. In design, we use alignment to organise elements, to group elements, to create balance, to create structure, to create connections between elements, to create a sharp and clear outcome. In design there are two alignment principles: Edge alignment and Center alignment.
  • Color: To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. Color can be a very powerful “weapon” in your artistic or creative arsenal — if yielded appropriately of course. For our designs on the web, color is often about the emotional and visual impact. If used correctly, colors can guide viewers to what’s important and add emphasis if you don’t overdo it.
  • Consistency: Consistency is one of the molecules of the Design DNA. Consistent design is intuitive design. It is highly useful and makes the world a better place.Usability and learnability improve when similar elements have consistent look and function in similar way. When consistency is present in your design, people can transfer knowledge to new contexts and learn new things quickly without pain. This way they can focus on executing the task and not learning how the product UI works every time they switch the context.
  • Golden Ratio:The golden ratio is probably best understood as the proportions 1:1.618. Of course, the mathematical equation at work here is much more complicated than that.The ratio itself is derived from the Fibonacci sequence, a naturally occurring sequence of numbers that can be found practically everywhere in nature, from the number of leaves on a tree to the spiral shape of a seashell. It can also be found in famous works of art and architecture and even in our own faces.The Fibonacci sequence is easy to remember.
  • Highlight and Legibility: Typography, font size and style can guide a user when well used or may lead to confusion when it isn’t used consistency. Presenting a message in a particular way can reinforce the impact of the message. Ensuring it is easy to read and used the appropriate font size helps in getting the message across.
  • Modularity: The strength of modular design is ever there inside web applications before. Smaller services or applications that form a larger, more complex system have really found their niche in the iPhone and contribute to the sucess of the product. Highly bespoke and tailored user experience are achievable by offering the platform that can be adjusted to individual user needs.
  • Occam’s razor: “the simplest solution is almost always the best.” It’s a problem-solving principle arguing that simplicity is better than complexity. With the flexibility and power of the web and our design tools, it’s easy to get carried away. Designers can end up making very complicated sites or designs that may have a lot of functionality and information, but are difficult to use, build and maintain. One might think the site can do more, but it actually accomplishes less.
  • Proximity and Similarity: The gestalt principle of similarity says that elements that are similar are perceived to be more related than elements that are dissimilar. Similarity helps us organise objects by their relatedness to other objects within a group and can be affected by the attributes of color, size, shape and orientation. The gestalt principle of proximity says that elements that are closer together are perceived to be more related than elements that are farther apart. As with similarity, proximity helps us organise objects by their relatedness to other objects. Proximity is the strongest principle for indicating relatedness of objects, helping us understand and organise information faster and more efficiently.
  • Symmetry: Symmetry creates balance, and balance in design creates harmony, order, and aesthetically pleasing results. It is found everywhere in nature, and is probably why we find it to be so beautiful. Symmetry is one of the fundamental principles in gestaltism, a human behaviour theory that proposes that our mind naturally creates order and completeness in the things we see and encounter. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively, can make things more interesting.

Usability

Source: Usabilitygeek

Usability is a crucial part that shapes its UX, and hence falls under the umbrella of UX. While many might think that usability is solely about the “ease of use” of a product, it actually involves a great deal more than that. So, let’s find out more about usability here and be absolutely certain about the nature of this fundamental building block.

  • Way Finding: This set of design principles is concerned making information spaces effectively navigable. Navigability means that the navigator can successfully move in the information space from his present location to a destination, even if the location of the destination is imprecisely known. Three criteria determine the navigability of a space: first, whether the navigator can discover or infer his present location; second, whether a route to the destination can be found; and third, how well the navigator can accumulate way finding experience in the space.
  • Flexibility Usability Trade-off: as the flexibility of a system increases, its usability decreases. The tradeoff exists because accommodating flexibility requires satisfying a larger set of requirements, which results in complexity and usability compromises. Design theory maintains that over their lifecycle, systems shift from supporting multiple uses inefficiently, towards efficiently supporting a single use as users’ needs become more defined and better understood, both by themselves and designers. When weighting the relative importance of flexibility versus usability, designers are advised to consider how well the needs of the user are understood. If user needs are well understood, designers should bias toward simple less-flexible systems. Otherwise, designers should create flexible designs that support multiple future applications. — Wiki
  • Garbage in garbage out: The garbage in–garbage out principle is based on the observation that good inputs generally result in good outputs, and bad inputs, barring design intervention, generally result in bad outputs. The rule has been generalized over time to apply to all systems, and is commonly invoked in domains such as business, education, nutrition, and engineering, to name a few. The “garbage in” metaphor refers to one of two kinds of input problems: problems of type and problems of quality.
  • Performance Load: Complexity is unavoidable element. Good design needs to account for these needs and be capable of providing the required performance load at the right time. Consider the performance load aspect of your design as a dance that the user will perform with the product. Sometimes the need will be for a slow and calm dance that relaxes the user and provides satisfaction.
  • Visibility: Good design is visible. One of the ways our brain shapes experiences is that it’s constantly noticing and interpreting clues in our surrounding environment: what is it, what does it mean, what does it do? And while we notice just about everything, there’s a balancing act required for interaction design that (a) invites action and (b) is easily understood. People should be able to easily tell that an opportunity interact is available, and they should be abler to reasonably predict what the result of that interaction will be.
  • Layering: When conveying relationship between groups of information the layering approach allows us to build complex information groups around an object.
  • Accessibility: It defines users’ ability to use products/services, but not the extent to which they can attain goals (usability). Designers should create output accommodating the needs of all potential users, be they disabled (e.g., color-blind users) or anyone facing situational barriers.
  • Perceptibility: Common ways to address this is to make sensory alerts both visual and auditory when an action is performed. This helps us to know and understand the environment and to take necessary actions then after.
  • Operability and Simplicity: The design should me made easily to operate and simple to use without any barrier or blockage in its operation.
  • Forgiveness: Making errors is an integral part of the way we humans live. We trip over when we are learning to walk and we press the wrong buttons when we use new UI. This fact is very unlikely to change soon. As Designers we must have that in mind when designing. Our designs must be aimed at preventing errors happening. Designers must minimise the negative impact of errors when they occur and provide a way to reverse anything if possible.

Interaction

  • Progressive disclosure:Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.
  • Affordance:A situation where an object’s sensory characteristics intuitively imply its functionality and use. An affordance is a desirable property of a user interface (UI) — software which naturally leads people to take the correct steps to accomplish their goals.The common psychological term for this is stimulus-response compatibility. Affordance when used as a tool, makes the designs easier to use and encourage the users to undertake the intended actions. Effective affordance results in higher conversion, registration rates and desired outcomes.
  • Confirmation, Errors and Forgiveness: When products are designed following the Principle of Forgiveness, the negative consequences of errors can be mitigated or prevented altogether. Products that are forgiving allow users to feel more confident, secure, and eager to explore unfamiliar territory. Conversely products that neglect forgiveness leave little room for error. Would you consider driving a car with no seat belts or airbags?
  • Fitts Law: The time to acquire a target is a function of the distance to and size of the target. Alike making elements you wish to be easily selectable large and position them close to users. This law especially applies to buttons, which the purpose of these elements is to be easy to find and select.
  • Constraints: The concept of constraints in design can be defined as the practice of limiting user actions on a system. Constraints limit the actions that can be performed by the user, thus increasing the usability of the design and reducing the likelihood of operator error.
  • Control:It’s therefore unsurprising that we seek out control in everything from our relationships — everyone has “put their foot down” at some point or another — to the color of our living room walls — even though the old color was fine, it wasn’t perfect. It’s ingrained in us, and it gives us a sense of comfort and well being. We try to ensure users will have positive experiences when using our products or accessing our services. This often translates into empowering users, thus giving them the tools to find their internal locus of control. In other words, we manipulate them into thinking they have been empowered.

Content

Illustrator: Fanny Luor
  • 80/20: A principle for setting priorities: users will use 20% of the features of your product 80% of the time. Focus the majority of your design and development effort (80%) on the most important 20% of the product.
  • Chunking:Term referring to the process of taking individual pieces of information (chunks) and grouping them into larger units. By grouping each piece into a large whole, you can improve the amount of information you can remember.
  • Depth of processing: This leads nicely on to the depth of processing rule. Cascade the most important elements down the page as people are more repetitive at the top of the page. Get core message over to the top rather than bottom. We can use diagrams to highlight and reinforce points and keep user focus by drawing attention to here area of visual design. Moreover using contrast, colour and textual emphasis will help.
  • Five hat racks: The Five Hat Racks was first developed by Richard Saul Wurman in his book Information Anxiety. In a nutshell, there are 5 ways to organise information: By Location, Alphabet, Time, Category and Continuum.
  • Hierarchy: Hierarchy is when an element appears more important in comparison to other elements in a design.
  • Readability: It measures the complexity of the words and sentence structure in a piece of content. The assumption behind this metric is that complex sentences are harder to parse and read than simpler ones. It’s usually reported as the reading level (stated as years of formal education) needed to easily read the text.

Hence, the talk of technology misses the point. It is the human needs, desires and emotions and their interactions with each other that create our insights that in turn drive innovation and success for companies. With a process that is understood and a philosophy that appeals to many, there is a lot we can do to ensure the business world adopts a path to greater product development, that builds on the needs and wants of people at its core. These experiences make the difference. It is the quality of experience that is the differentiator for any company in a crowded market.

Solving people problems will inevitably solve business problems. The challenge is to get businesses to believe in it, and trust those to deliver on the promise of user centred design.

Thank you for reading!

Hopefully you enjoyed reading this story!

Follow me for more — DribbbleTwitterWebsite

--

--