The Design Philosophy Behind My New Website

TL;DR: After analyzing my old website, I decided to put more emphasis on (1) identifying and highlighting the pieces of information that are actually useful and (2) a two-dimensional approach to displaying my CV along traditional categories and skills/topics. Moreover, I set myself design constraints that forced me to keep my new website as clean and simple as possible, following the design philosophies of brutalism and Mies van der Rohe.

My new website has been up and running for a few weeks now and I suppose it might seem unusual to some of you. Therefore, in this post, I want to explain how I ended up with what I did. What motivated me to create a new website was the fact that OpenShift v2 was shut down by Red Hat and the new version of their hosting service was so unsatisfying that I decided to move to Github pages instead. This, however, also meant that I could not build on a Node server anymore, so I took the opportunity to start over with a blank slate and create something completely different.

Core Questions

As a first step, I analyzed my old website, and I noticed two things. First, it was more or less structured exactly like my CV, which is, to be honest, not the most creative way to lay out an online presence. Second, my publications were listed in a format that I would also use in the reference section of an actual research paper. However, that format was only really understandable and readable for scientists, which—as I could safely assume—excluded a certain amount of my visitors. After all, the only necessary pieces of information are the title (plus a link for those who want to have a closer look), the list of authors, and which topics the paper is actually about. From a title like “Ensuring Web Interface Quality through Usability-based Split Testing” one may conclude that I’ve done work on usability, but how would you know that this publication also addresses analytics and machine learning without reading it? The acronym of the conference where it was published or the CORE rating of that conference certainly don’t help the average user.

MaxSpeicher.com v1

Therefore, the two central questions that informed the design of my new website were:

  • How can I present my work and skills in a better, more useful, and more memorable way than the standard paper CV structure—projects, work, education, etc.?
  • How can I more effectively communicate to people the topics I actually worked on and which skills I acquired rather than just telling them that I was an “Intern R&D at Unister”?

Design Constraints

Additionally, I set myself the following design constraints to ensure I had to come up with something completely different and create a novel, unusual, and more memorable experience. The main drivers for these constraints were my love for minimalism and a desire to prevent unnecessary overhead as much as possible.

  • Make it brutalist. Originally, brutalism was an architectural movement known for “its ruggedness and lack of concern to look comfortable or easy”. Accordingly, brutalist websites have a rough, simple, and unfinished look. They are almost nihilistic towards user experience.
  • Make it as simple as possible. I chose this constraint in accordance with Mies van der Rohe’s architectural philosophy of “extreme clarity and simplicity”. He made his buildings purely functional and refrained from using anything ornamental.
  • Don’t use icons or images. Standalone icons are a bad idea in most of the cases anyway (as this nice summary explains). This led me to using smaller text with a solid, edgy border in places where I used icons for social media sites and the different sections on my old website.
  • Use only one primary color. The rest must be kept in black, white, and gray.
  • Work with typography as much as possible. Apart from the one primary color and white space, I tried to use only different font sizes and weights for structuring and highlighting information.

Finally, I came up with and realized a concept that is largely based on hashtags to communicate my skills and the topics I’ve worked on. Every CV entry on my website—be it a university degree, a job, or a publication—is annotated with a set of such tags. The entry about “Ensuring Web Interface Quality through Usability-based Split Testing” now tells the visitor that the paper is about #analytics and #machine learning, among other things. At the top of the page, I feature a list of skills that enables users to filter the page and hide everything that’s not related to a specific skill or topic they’re interested in. Moreover, I chose a two-dimensional approach to presenting my CV. That is, the visitor has the chance to display it either according to the traditional structure of a CV, or grouped by skill/topic. In the latter case, all CV entries that feature a certain tag are displayed in the corresponding section to be able to view them at a glance.

Technology-wise, my new website is based on standard web technologies, Less, and gulp.

MaxSpeicher.com v2

Why I Don’t User Test My New Website

I asked some friends to have a look at what I created and they immediately came up with the idea of having a sticky menu—as they are used to from other websites—so that they wouldn’t have to go back to the top of the page (using the #top button in the bottom right corner) when they wanted to change the current filter or the way the CV is displayed. I started implementing this supposed improvement yesterday, but became more and more dissatisfied the more I progressed. While it would have made the website slightly more usable (sparing users a click from time to time), a sticky menu would violate the constraints that define my design and would make my website less unique in my opinion. After all, the average user prefers being confronted with and using things they already know. Therefore, I abandoned the idea and did not deploy the changes.

In this sense, the design of my new website is clearly not 100% user-centered, but rather an experimental piece of art.

Did I manage to intrigue you? Feel free to have a look at http://www.maxspeicher.com/v2.

Advertisements

The Conversion/Usability Framework: How Usability Impacts Profit

TL;DR: Usability is related to customer satisfaction and loyalty and therefore has a direct impact on profit. Yet, bad usability is abundant, especially on E-commerce websites. The Conversion/Usability Framework introduces usability as an additional lever on top of “traditional” means to increase profits, which can and should also be applied beyond E-commerce.

When businesses want to increase their profit (or simply keep it from crumbling), there are certain means that can be employed, such as restructuring processes, economies of scale, or exploring novel marketing strategies. Another lever to increase profit is the usability of products and sales channels, which is, however, surprisingly often neglected—even in E-commerce—although research and common sense suggest that it is directly related to customer satisfaction and loyalty. In this article, I analyze how usability influences revenue and costs (and therefore ultimately profit) and how the Conversion/Usability Framework can be used to improve both. Yet, to start off, let us first have a look at some basics.

Revenue, Costs, & Profit

Profit is at the heart of every business. It is determined using the profit function, which states that profit equals revenue minus costs [1]. The different parts of this function are influenced—directly as well as indirectly—by a number of factors [7]. Revenue is affected by both the price and the amount that is sold of the offered good. Then again, the amount of products a business sells as well depends on the price, which should be neither too low nor too high due to price elasticity. That is, customers will not buy an excessively expensive product, but at the other end of the spectrum it might be perceived as low-quality, thus also resulting in lower sales. Overall costs are composed of fixed costs and variable costs. The latter depend on the amount of products sold. The more you produce the higher the variable costs. Overall, this results in the following dependencies (the diagram has been adapted from [7]):

E-Commerce

In E-commerce, Amount can relate to, among other things, a product sold through a website (e.g., shoes, books, & vacation trips), or a subscription to a web service or platform (e.g., a domain, cloud storage, & movie streaming). On such websites—be it consciously or not—companies often engage “traditional” sales strategies that result in so-called dark patterns. To create a sense of urgency and scarcity, almost all travel booking websites I know constantly display warnings that “X other users are currently looking at this offer”, “only Y rooms are still available on the given date”, or “the current offer is valid for only Z more minutes”. Such warnings are usually kept in extremely bright colors, clutter the interface and distract from the actual functionality and task. To give another example, in many cases, buttons for canceling checkout processes or subscriptions are made as nonsalient as possible (or are even hidden) while purchase buttons are strongly highlighted.

The Case for Usability

Yet, evidence suggests these are bad practices. Sauro [5] found that “[p]erceptions of usability explain around 1/3 of the changes in customer loyalty” in a study that investigated correlations between the System Usability Scale and Net Promoter Scores. “Overtime,” he states, “if people think your product is usable then they are more likely to use it, more likely to recommend it and you are more likely to sell it.” [5]

In different research,  Kuan et al. [2] “found a relation between system quality and conversions, i.e., they identified three dimensions of usability that ‘explain over 70% of variance of intentions for planned purchase as well as future purchase.’ Thus, it is highly necessary for e-commerce companies to continuously evaluate their products with respect to good usability, in particular, to remain competitive.” [8]

Hence, the usability of an E-commerce website, as well as that of the product itself, directly influences sales numbers. Therefore, the above diagram must be extended to include the concept of Usability. From this results the following, which I call the Conversion/Usability Framework (due to the fact that sales in E-commerce are usually referred to as conversions):

The Profit Function w/ Usability

Usability has an impact on three of the variables of the profit function:

  • Usability → Amount: Based on what I described above, usability directly influences the amount of products a company sells. The better the usability of the E-commerce website and/or the product itself, the more products are sold due to more satisfied customers and more recommendations.
  • Usability → variable Costs: Better usability also leads to lower variable costs related to help and support. A more usable product is more intuitive to use and triggers fewer errors [3], which reduces customer support requests and replacement of defect products.
  • Usability → fixed Costs: Ensuring good usability requires to set up corresponding processes or incorporate usability testing into existing ones. This additional effort leads to increased fixed costs. However, firstly, appropriate design and QA processes should already be in place and easy to complement, and secondly, the benefits of good usability outweigh these increased costs in the long term.

Applying the Conversion/Usability Framework

It is important to note that the Conversion/Usability Framework is not exclusively valid in the context of E-commerce, but can be applied regardless of the product that is being sold and the way it is sold. This is because every product is used for something by the customer, and everything that is being used has an inherent usability. A teapot, a faucet, and a microwave oven, for instance, have a certain usability just like a website has.

When a company wants to increase its profit, there are certain “traditional” levers one can make use of. One way is to reduce unnecessary fixed and variable costs, e.g., by restructuring and optimizing inefficient processes or taking advantage of economies of scale. Another way is to increase revenue by, e.g., better pricing, exploring novel marketing opportunities, or entering new markets. As described above, the Conversion/Usability Frameworks introduces the additional lever Usability that—independent of the company and product—should never be neglected and can be used in the following ways:

  • Increasing sales: In order to increase customer satisfaction and loyalty and as a result sell more products, take measures to optimize the usability of both your product and sales channels. The questions you have to ask are: Is my product easy to use for its intended purpose(s)? and Is my product easy to buy? To be able to answer these questions with “yes”, employ established design practices and conduct regular user tests.
  • Decreasing variable costs: To minimize your customers’ error rates and as a result reduce customer support efforts and the number of products that have to be replaced, ask the same questions as above. On top, you should implement a Lean Support approach based on which you can incrementally create a knowledge base that lets your customers help themselves. Here, you should apply the same usability standard as for your products and sales channels.
  • Decreasing fixed costs: Since every usability process imposes a certain amount of fixed costs, one way to bring down the latter is to review and restructure existing usability processes. Tests with representative sets of users and realistic tasks that collect behavioral and attitudinal data [6] usually yield the best results. However, they cost significant amounts of time and money. If you have limited resources and need to cut fixed costs, certain trade-offs are possible. For instance, according to Nielsen and Molich [4], a simple and inexpensive heuristic evaluation with only 3 to 5 evaluators is already enough to find the majority of usability issues in an interface.

Conclusion

Good usability is a key quality aspect of any product or website that is, however, surprisingly often neglected by companies. Especially, on today’s E-commerce websites, we can observe numerous dark patterns that try to trick the customer into purchases and subscriptions. However, this ultimately leads to dissatisfied, disloyal customers.

By applying the Conversion/Usability Framework on top of “traditional” methods, it is possible to increase customer satisfaction and loyalty, reduce variable costs and sell more and better products. This should be common sense in E-commerce settings but is also applicable beyond websites. For a successful business, it is important to develop an understanding of the importance of some sort of Usability Thinking, no matter how you sell your products and which products you sell—be it teapots, microwave ovens, cars, or SaaS subscriptions.

(This article has also been published on uxdesign.cc.)

References

[1] https://www.aatsl.lk/files/articles/Cost-Revenue-and-Profit-Functions-(English).pdf (accessed September 21, 2017).
[2] Kuan, Huei Huang, Gee-Woo Bock, and V. Vathanophas (2005). “Comparing the Effects of Usability on Customer Conversion and Retention at E-Commerce Websites”. In: Proceedings of the 38th Annual Hawaii International Conference on System Sciences (HICSS ’05).
[3] Laubheimer, Page (2015). “Preventing User Errors: Avoiding Conscious Mistakes”. https://www.nngroup.com/articles/user-mistakes/ (accessed October 19, 2017).
[4] Nielsen, Jakob and Rolf Molich (1990). “Heuristic Evaluation of User Interfaces”. In: Proceedings of CHI.
[5] Sauro, Jeff (2010). “Does Better Usability Increase Customer Loyalty?” https://measuringu.com/usability-loyalty/ (accessed October 12, 2017).
[6] Sauro, Jeff (2015). “5 Types of Usability Tests”. https://measuringu.com/five-types-usability/ (accessed October 19, 2017).
[7] squeaker.net (2010). Bewerbung bei Unternehmensberatungen: Consulting Cases meistern.
[8] Speicher, Maximilian (2016). Search Interaction Optimization: A Human-Centered Design Approach. Ph.D. Thesis. Technische Universtät Chemnitz.

Schrödinger’s Website

Before you receive feedback from users, the user experience and usability of your website are both ‘good’ and ‘bad’ at the same time.* Through a good design process you can only raise the chances of user experience and usability manifesting as ‘good’** once the feedback arrives.

* That is, the factors x and y of a linear combination U = x\ \mathrm{good} + y\ \mathrm{bad} with x + y = 1 are unknown.
** Subject to definition. For instance, x > y or x \geq \frac{2}{3}.

The U Score: Redesigning Usability Testing

logo-bigUsability testing is often perceived as cumbersome and time-consuming and therefore not thoroughly applied. This was one of the key observations leading to the topic of my PhD thesis. Particularly conducting tests with actual users is often omitted, which results in the release of suboptimal products and websites. In my thesis, I tackle this problem through more automatic evaluation and optimization, however, in the specific context of search engines. Yet, every type of website—no matter if private or professional—should undergo at least one usability test before its release. Therefore, we need to redesign usability testing itself:

  • It must be quicker.
  • It must be cheaper.
  • It must be easier to understand.
  • Still, the result must be as precise as possible.

the-u-score_screenshot

The U Score is a more general derivative of the findings of my PhD project that provides quick and precise usability evaluation for everyone based on actual research. Any designer or developer who isn’t able to conduct a regular usability test can answer a minimal but exhaustive set of yes/no questions and receives a single usability score for their website or web app. The questions have been designed to be as objective as possible and are based on established research findings. Also, for time reasons I try to minimize the need to involve other people, which, however, cannot be completely eliminated (still, you can receive a complete U Score with the help of only three friends who have a look at your site).

In this way, the U Score provides an approach to usability testing that is as precise as possible given the minimal effort it requires. It’s intended for situations in which designers/developers don’t have the chance to conduct a traditional usability test. Also, it addresses everyone who needs a quick assessment, has never tested the usability of a website before or is new to usability testing. However, please note that the U Score can only be an approximation and is not a complete substitute for established usability testing methods. Still, it gives you a very good baseline according to the motto: Any usability test is better than no usability test!

The current version of the U Score is still in beta development status. Therefore, I highly appreciate your feedback, which you can add to this public Trello board.

For implementation, I’ve relied on a number of well-known technologies and frameworks in combination with some that were new to me (the ones marked with an asterisk):

I hope the U Score can help to reduce the number of websites who’ve never been tested at all and particularly help you to conduct more and quicker usability tests. Enjoy!  🙂

The Search Interaction Optimization Toolkit – The Essence of my PhD Thesis

SIO Toolkit Logo
Logo of the SIO Toolkit.

My PhD thesis introduces a novel methodology that is named Search Interaction Optimization (SIO) and is used for designing, evaluating and optimizing search engine results pages (so-called SERPs). As a proof-of-concept of this new methodology, I’ve developed a corresponding SIO toolkit, which comprises a total of seven components1 (most of which have already been introduced in previous posts):

  1. Inuit, a new instrument for usability evalutation;
  2. WaPPU, a tool for Usability-based Split Testing;
  3. a catalog of best practices for creating better usable SERPs, which together with WaPPU and a special add-on forms
  4. S.O.S., a tool for automatically evaluating and optimizing SERPs;
  5. TellMyRelevance! (TMR), a novel pipeline that predicts the relevance of search results from client-side interactions;
  6. StreamMyRelevance! (SMR), a streaming-based version of TMR that works in real-time rather than batch-wise; and
  7. a set of requirements for current & future search interfaces, which has been derived from an empirical study with German-speaking users.
SIO Methodology Logo
Logo of the SIO Methodology.

Describing the design and development of the above components and evaluating their effectiveness and feasibility makes for a major part of my thesis. Now, I’ve finally managed to organize all of them in terms of GitHub repos2, which I make available through a new website I have specifically created for my PhD project: http://www.maxspeicher.com/phdthesis/. In particular, on that site you can filter the components depending on whether you want to design, evaluate and/or optimize a SERP. It also lists all of the related publications including links to the corresponding full texts (via ResearchGate). In case you are actually interested in all that fancy research stuff3—have fun browsing, reading & playing around! 🙂

1 The logo of the SIO toolkit features only six tiles because S.O.S. and the catalog of best practices are treated as one component there.
2 Because my PhD project was carried out in cooperation with Unister GmbH (Leipzig), unfortunately it’s not possible for me to provide the source codes of all components via GitHub, as some contain company secrets.
3 Which I doubt. 😉

INUIT: The Interface Usability Instrument

INUIT LogoAs one of the building blocks of my PhD thesis, I have developed a novel instrument for measuring the usability of web interfaces, which is simply called Inuit—the Interface Usability Instrument1. This was necessary because a usability instrument that is suited for the automatic methods for Search Interaction Optimization I have developed in my PhD project must fulfill three particular requirements, which are not met by any existing instruments:

(R1) A minimal number of items.
(R2) Items with the right level of abstraction for meaningful correlations with user interactions recorded on the client.
(R3) Items that can be applied to a web interface in terms of a stand-alone webpage.

The Instrument

Inuit has been designed and developed in a two-step process: First, over 250 rules for good usability from established guidelines and checklists were reviewed to identify a set of common underlying factors (or items) according to R2. From these underlying factors, a “structure” of usability based on ISO 9241-11 was created, which was then shown to 9 dedicated usability experts in the second step. The experts—all of which were working in the e-commerce industry—reviewed the given “structure” and proposed changes according to their perception of web interface usability. Finally, seven items have been identified:

  1. Informativeness
  2. Understandability
  3. Confusion
  4. Distraction
  5. Readability
  6. Information Density
  7. Reachability

These items can be translated to, e.g., the following yes/no questions for use in a questionnaire for determining the usability of a webpage:

  1. Did you find the content you were looking for?
  2. Could you easily understand the provided content?
  3. Were you confused while using the webpage?
  4. Were you distracted by elements of the webpage?
  5. Did typography & layout add to readability?
  6. Was there too much information presented on too little space?
  7. Was your desired content easily and quickly reachable (concerning time & distance)?

Conclusions

A confirmatory factor analysis based on a user study with 81 participants has proven that our instrument reasonably well reflects real-world perceptions of web interface usability. Inuit was first introduced at the workshop “Methodological Approaches to Human–Machine Interaction”, which was held as part of the 2013 Mensch & Computer conference. The corresponding paper is named Towards Metric-based Usability Evaluation of Online Web Interfaces (full-text here). The final version of the instrument has been presented at this year’s International Conference on Design, User Experience and Usability (DUXU), which has been held in Los Angeles. The full research paper is titled Inuit: The Interface Usability Instrument and available via Springer (full-text here).

Future Work

In the future, I intend to transfer Inuit into the context of my current work. That is, I intend to use it for evaluating the web interface of HoloBuilder, which enables users to create 3D content for the web, in contrast to the usual 2D content that is consumed nowadays. It will be particularly interesting to see whether both, 2D and 3D web interfaces can be meaningfully evaluated using the same minimal instrument. Furthermore, Inuit will be applied in the context of the research on evidence-based computing that is happening at the VSR research group at Technische Universität Chemnitz.

P.S.: Thanks a lot to Viet Nguyen for the awesome Inuit logo! 🙂

1 Please note the small caps!