5.1. Styleguide Concept: Content, Structure & Testing
As with any website, providing relevant content to its users is undoubtedly the most important job a styleguide has to fulfill. Logically, what is valuable content completely depends on the requirements of the actual users. Through in depth evaluation of the extensive user interviews, I was able to derive a set of information that would prove useful for the employees working with the system. While I was able to form what is close to an ideal, complete picture, there of course are some areas that are more pressing than others and therefore should be considered higher priority.
Content Needs
The most important content to document in a styleguide logically covers the aforementioned areas of biggest pains within the company. So in our case, the basic user interface styles and interactive elements, the overall company vision and mission as well as predefined layout combinations according to the tonality of page content. But even above those, there is a broad spectrum of topics to cover in order to create a broadly useful tool to be used throughout the company. Other relevant aspects that became apparent through the user interviews, sorted by importance in descending order, are:
- Reasoning of design decisions: Most participants wished for detailed explanations on the background and reasons for certain design decisions throughout the system. If possible, these reasons should be backed up by psychological insights or test results and put in relation to a certain performance goal. This information gives the guide more plausibility and allows people to better comprehend the UI system as well as to carry the same principles over to other areas of their work. Ideally, the fundamental design reasons spreading through the system will be covered in a separate Principles section, while including more situation specific information directly at the corresponding section within the guide.
- Code: Having the actual code of an element, along with instructions for usage and possible combination with certain classes and attributes, is a great asset to many. It makes elements easy to use and adapt when building pages, but also lets designers better comprehend their unique characteristics. As an added benefit, it helps to eventually demystify code and make it more approachable to people generally deterred by programming.
- UI resources: Having access to up-to-date UI resources and template files for design software is highly valuable for any designer. Not having to recreate existing elements and hunt for assets increases both speed and quality of work greatly. By collecting and unifying the individually kept files from designers throughout the company, an extensive first draft can be created to further iterate upon.
- Interaction, animation & movement: Movement within a user interface and its reaction to user input are abstract concepts that can be tough to envision, yet they are highly important for providing a smooth user experience (Daliot, 2015). While they can be a powerful tool for directing user attention when used deliberately, excessive use without clear usability objectives can be equally hurtful to the user experience (Bedford, 2014). Having these concepts explained by means of interactive examples makes them easier to comprehend, internalize and utilize correctly when designing features and flows. For incorporation into the styleguide, it is advisable to explain the basics of timing, easing and choreography that are applicable for the complete system in a standalone chapter, while covering more specific interactions within the corresponding element’s section.
- Interface writing tonality: As previously established, writing is a fundamental part of design. Yet many are missing a sense of direction for how to address customers within the system. A simple section describing the general tone of voice, along with positive and negative examples, would give designers more confidence when having to write content within features.
- Responsive behavior of elements: For creating responsive interfaces, it is crucial to know how a component will change and adapt to varying viewports. When documenting suitable elements, their responsive behavior should therefore be separately explained as well as made visually perceptible.
- Content tonality and wording: Similar to the problems regarding interface tonality, content creators often face great difficulties finding a coherent voice throughout their team. Difficulties become even more apparent due to varying requirements for different types of content. Guidelines for finding a matching voice and adapting to suiting tonalities are highly important and a necessity for any expanding company (Williams, 2016).
- Negative examples: While a thorough explanation of how to use a certain element usually gives you a basic understanding of the intentions behind it, through this alone it may be tough to get a solid understanding of the bounds of its usage. By purposefully showing negative examples of what not to do, it becomes easier to get a feel for how to utilize the guidelines creatively without breaking any rules.
- Responsibilities and process: Though any thoroughly designed styleguide aims for completeness and total clarity, due to the inherent nature of change this will always remain an aspired state. When an employee is missing a specific solution or has trouble applying what is presented, having an overview on the general proceedings and responsible people will help resolve these issues faster.
- Visual asset specifications: Visual assets, such as photographs and other graphics, play an essential in making a system feel coherent. Achieving coherence within visual assets over a long time, however, becomes increasingly difficult. Asset specifications are meant to document content in color, composition and mood as well as asset dimensions and their use within the system.
- Adapted layout rules for print: While irrelevant in regards to the digital appearance of a company, print products play an important role for general brand recognition. Though customers tend to be more forgiving for cross media inconsistencies, bridging the gap by creating a visual language that works in any context adds the finishing touches on a brand identity and reflects attention to quality and detail through and through.
Analyzing the interview results allowed me to gain a thorough understanding of the complete content requirements for a company-wide styleguide. Interestingly, these results in many ways match the the content found in my analysis of design systems. Hence the terms styleguide and design system could be used interchangeably for our documentation. Still, none of the inspected systems offered all of the abovementioned information. This was to be expected, since the precise content needs depend on the specific requirements of a company and the users of its styleguide. Subsequently, they have to be evaluated for every system individually.
Form and Structure
After my initial research in the field, the only reasonable choice of medium for the styleguide appeared to be a centralized, online platform that would be easily accessible to anyone. Uncoincidentally, evaluating the preferences, requirements and expectations our users voiced in the interviews lead to the exact same conclusion. Using a website for documentation solves the most pressing issues of versioning and accessibility with seemingly no drawbacks compared to other common solutions. However, choosing the web as a medium for content doesn’t make it useful by default. With navigation being a substantial part of making any website usable, coming up with an intuitive, relatable and understandable information architecture is essential. Building on the functional categorization of elements and UI groups previously established, as described in 5. Styleguide Concept: Inventory & Classification, I designed a map visualizing the component structure and element relationships within our user interface. This map was then used as the basis for the first iteration of the styleguide’s information architecture.
Paper Prototyping and Testing
Having gathered sufficient input on the requirements for the styleguide’s content, form and structure, I was now able to develop the first substantiated interface concepts. To validate my assumptions and continue in a way that is most beneficial for further iterations I went on to formulate my concepts as interface scribbles that I set out to test and discuss with users. Performing thorough, iterative tests with real users before focusing on design and implementation is a reliable approach for getting feedback and finding significant problems within your concepts early on (Holtzblatt et al., 2004). Using paper prototypes rather than other, more high-fidelity techniques, allows for getting faster user validation and thereby performing rapid iterations on the concepts. Above that, their inherently unfinished appearance makes it easier for participants to focus on high-level concepts and system interactions rather than visual design, which often is a problem with early stage prototypes that have not gone through the proper visual design phase yet.
In order to get validation on most every part of the website I tested a broad set of concepts, from information architecture, content structure, navigation and exploration to personnel responsibilities and maintenance processes. Aiming for the optimal benefit-cost ratio in qualitative user testing, I performed individual tests with each of five participants since it “lets you find almost as many usability problems as you’d find using many more test participants” (Nielsen, 2012). Each of the participants also previously took part in the requirement interview, hence matched the target group. Finally, I performed two rounds of testing with every participant, testing the initial concepts in the first round and evaluating the adjustments in the second iteration. Adding up results from both rounds, I eventually arrived at my final concept. In the following, I will illustrate in detail how I went from initial ideas to the final concept for both, the user interface as well as the interpersonal process.
