UX Meets MBA: What Happens When A Designer Goes To Business School by Gavin Lau

If great design can imbue customers with trust, why are designers so removed from product management and the larger business strategy? As a VP of UX with an MBA, I strive to bring both worlds together to create a new model in which user experience and design align with overall business strategy and company vision to drive increased revenue and customer engagement.



A Seat At The Table

As the Internet became commercially viable, “first to market” generally prevailed as a dominant corporate strategy. However, as technology has become more open and reusable, product differentiation is now a proven strategic blueprint. This tectonic shift has been a boon for the design discipline. Consequently, design has gotten the proverbial “seat at the table” and is now expected to be a driving, strategic function.

For designers, this is a celebrated, exciting advancement, yet it has also exposed a severe skills gap. Specifically, design leaders are being thrust into overarching, cross-functional executive positions, with little to no formal training in business or strategy skills.

Consider the context: Most BFA and MFA programs don’t cover traditional business skills, and companies certainly aren’t investing in cross-functional training for creative professionals. The resulting condition is tragic: Design teams and leaders are not set up for success and, subsequently, are unable to deliver, thus relegating the collective back to a service function.

I’ve experienced this first-hand. I unexpectedly found myself in boardrooms and strategy sessions armed with nothing more than Photoshop and front-end programming competencies. I knew the value of design work but simply couldn’t articulate it in a convincing and relatable form to a corporate audience.

 

Designer Goes To Business School 

Out of frustration, I formulated a hypothesis: If I were educated in core business skills, I could shift myself (and design teams) from a service to a highly strategic functional asset, driving larger organizational direction.

Very soon, I found a workable solution: a part-time MBA program where I would study and learn actionable skills of business frameworks and best practices of management. So, for just over three years, I was a senior user experience designer by day and an MBA student by night.

Though I studied many illuminating topics (economics, financial accounting, business law, supply-chain management, corporate ethics) as they relate to design, three particular areas of study were highly impactful: statistical analysis, competitive strategy and organizational management. These subjects were most impactful because, to be candid, I had never studied or considered them at depth professionally. Yet, the more I learned, the greater the impact these courses had on my professional development and approach to design.

For just over three years, I was a senior user experience designer by day and an MBA student by night. Armed with this new statistical skill set, I was able to incorporate business thinking as an early step in my design process.

For just over three years, I was a senior user experience designer by day and an MBA student by night. Armed with this new statistical skill set, I was able to incorporate business thinking as an early step in my design process.

 

 

A Bit Of Math Goes A Long Way

When it came to statistical analysis, as a creative professional, I had an adverse physical reaction to the very idea of spending four months pouring over Excel spreadsheets. In fact, I had done just about everything possible to avoid “math” during my academic and professional career. I was guilty, like so many, of being stuck in the construct of a left-brain and right-brain duality.

It was surprising to me that my first weeks in statistics had very little to do with mathematical calculations, but rather, with theory. I learned that statistics actually rest upon a singular premise: ratios. If you boil down ratios to their core, it’s basic: X ÷ Y = Z. Simply, you take two forces, stack them against each other, and you achieve an output that is influenced against both forces.

Surprisingly, as a designer, the concepts and application of ratios were very familiar to me. I had comfortably worked with ratios in everyday design tasks (grids, padding, aspect ratios) throughout my career.

As I progressed through the course, week after week, I waded through increasingly complex financial models that leverage statistics. Over time, this repetition built up a muscle, and without even thinking about it, I found myself toying with basic statistical models to help guide my design decisions.

Normally, as a designer, I’d go through my design process (competitive auditing, high-level concepts, interactive wireframes, visual design, usability testing), and leave it to the business unit to figure out the impact on our company and users. Armed with this new statistical skill set, I was able to incorporate business thinking in my design process as an early step.

Let’s consider a simple redesign of a home page. For many designers, this can be very challenging because there are so many competing priorities: search functionality, email registration, illustration of the brand’s value, testimonials, etc.

Prior to using statistical analysis, I’d just try to find a design that represented a compromise for all use cases and moved on. Now, I’ve been able to step back and use statistics to help prioritize my layout. Rather than “just” designing a variant or two, I’m able to provide a thoughtful overview of the revenue impact correlated to my design decisions.

Let’s take a hypothetical example. In a first pass of a design, the layout would prioritize email registration as the primary action for a user. Consequently, this would have the immediate impact of fewer orders. Using standard Google Analytics, I was able to show the potential revenue ripple effects of that approach.

Conversely, for a second pass at the design, my layout would feature a search bar. Of course, this would lead to a decrease in email registrations but would also lift the number of immediate orders, as well as conversions (users would convert better because they found more relevant results).

Once I was able to build this sort of analysis into my design practice, more and more of my initiatives got investment. 

Once I was able to build this sort of analysis into my design practice, more and more of my initiatives got investment. 

This is a basic application of a statistical model, but as it scales, it becomes even more powerful for larger design initiatives (launch of an app, new product offering, new checkout page, e-commerce feature, brand campaign). What’s more, the model becomes more specific and predictive the more it’s used.

As I progressed, I was able to genuinely factor in cost reduction as a critical variable into my models. Consider a chatbot that can easily answer questions for a customer; that feature cuts down on call-center operations, thus reducing a cost driver to the business. Or consider an engaging feed, constantly being populated by fresh content; this boosts organic repeat visits, reducing pricey SEO spend. Of course, raw revenue generation will always be a key driver for business, but as designers, our work actually has a profound impact on cost reduction for the company. This type of analysis gave financial credibility to design-led projects that would have previously been considered “non-revenue generating.”

In all, once I was able to build this sort of analysis into my design practice, more and more of my initiatives got investment. It became formulaic. I would not only present a jaw-dropping, visually striking design prototype that solved actual customer problems, but would also offer precise measurement and financial gains (or savings) to the company.



Build Your Moat

Even armed with statistical analysis, I still struggled with the ask to be more “strategic.” But, to be honest, I had no idea what that really meant. How does one actually be strategic? Is it planning? Is it innovation?

In my study of competitive strategies, I read extensively about strategic frameworks to help guide decision-making. In particular, we spent a great deal of time understanding the work of Michael Porter, who is basically the Jony Ive of business thinking.

Porter constructed a simple yet far-reaching structure to guide corporate decision-making (The Economist has a good summary). It all rests on the premise of achieving an enduring advantage over your competitors (Warren Buffett calls it the moat).

To summarize, Porter defines the two ways in which an organization can achieve competitive advantage over its rivals: cost advantage and differentiation advantage. In short, to stand apart, you can either have a very different offering or win on price. (Mind Tools has more on this.) If executed correctly, the business will have achieved a competitive advantage over its competitors.

Differentiation is a strong strategic approach, as opposed to cost leadership. We identified a pain point and a product for an emerging customer segment.

Differentiation is a strong strategic approach, as opposed to cost leadership. We identified a pain point and a product for an emerging customer segment.

Today at Shutterstock, we certainly offer exceptional content at competitive prices, but many in the industry offer similar products. Using Porter’s model, we knew that differentiation would be a strong strategic approach, as opposed to cost leadership. Aligned with traditional user experience and product strategy, we identified a pain point for an emerging customer segment. Customers want to be able to quickly edit and design off our images without leaving the website. From there, our integrated editor tool was born. As it moved from beta to production, we have emerged with a highly differentiated experience for a new customer segment.

Porter’s model is powerful for larger-scale strategic initiatives, but is equally important for feature development. How often have we seen decision-makers deploy a strategy to merely copy existing functionality (see Instagram and Snapchat)? To this, Porter would say, “… bad strategy simply ignores competitors; average companies copy; and winning companies lead their competitors.”

From a design standpoint, articulating the flawed logic of replication becomes simple and powerful. A series of designs showing our product changes to be benchmarked to company B’s advantage showed the futility of the effort and how differentiation would never be achieved. In contrast, a differentiated product (alongside a statistical modeling) can clearly illustrate that the optimal path allows for both differentiation and long-term revenue gain.



Management Is Highly Underrated

Designers are natural optimists. Where others see disorganization, designers see the prospect of beauty. Where others wish to cut corners, designers take pride in completeness and quality. Moreover, designers are problem solvers, collaborators and, yes, a bit eccentric, too! We are the people who are wanted — who are needed — to be constant, positive creative, cultural and strategic forces within companies.

However, I would argue that while we can be epicenters of culture and innovation, our discipline hasn’t devoted much attention to successful management of our organizations. Far too often, we manage work, not the individual or the collective.

For me, a breakthrough in thinking about how to structure design departments was found in the work of Edward Deming, often referred to as the father of quality.

Deming, an academic who was brought to Japan in the 1950s following World War II, is credited with being a leading figure in post-war Japan’s economic rise. Deming based his entire business philosophy on an ideal of cooperation and complete employee fulfillment. Much of his experience and life work were codified in his brilliant 14 points.

To me, these 14 points are an exact blueprint for how to build and scale a thriving design organization. I encourage every reader to share these with their teams and to ask for a grade on each point. I promise that you’ll find immediate areas of opportunity. If you commit to the changes, you will have all the guidance needed to build a connected, high-morale and thriving organization.

I would like to leave you with Deming’s final point, point 14: “Put everybody in the company to work to accomplish the transformation. The transformation is everybody’s job.”

To me, this point — and my entire MBA experience — reaffirmed that the foundation of design thinking, customer empathy and long-term vision is, in fact, the foundation of an enduring corporate strategy. Far too often in today’s economy, strategy is subject to the whims of short-term gains, which, over time, comes back to haunt company and consumer alike. Or, inversely, as the adage goes, if you solve your customer’s problems, they’ll solve your business problems.

I’ll end with this: Invest in yourself. Invest in learning new skills. Invest in your design team. When you do, you’ll see great returns for yourself, the team, the customer and the business.


 

How to choose a user research method by Gavin Lau

1*be3MFkdohnVKr0ywbbVE-w.jpeg

“What’s your process?”

This is a question that you’ll often get from prospective clients, or in an interview for a UX design position. Of course, your exact process will end up being at least a little bit different for just about any UX design project you undertake. Whatever your full answer may be, as I recently wrote, user research has to be a part of that process. In most cases, you just can’t afford not to do it.

What’s less clear is what kind of user research you should do. There are a lot of different techniques to choose from, each with different strengths, weaknesses, and research goals. This article is intended to give a quick rundown of how to decide on what your research goals are, and what techniques you can use to achieve those goals.


Understand the goal

The most important question to ask yourself before deciding on what research methods to use is: What do I want to know?

How do you go about answering that question? You could start by asking yourself why you want to learn that thing. Identify what you already know about your users, and what you don’t know about them. What are your knowledge gaps? Some examples of useful questions that you may or may not already know the answers to:

  • Who are the users?
  • What are their behaviours, goals, motivations, and needs?
  • What assumptions have you made about them?
  • How do they currently use your product?
  • What other products do they use?
  • Where do they have problems with their workflow?
  • Do they like using your product?

Once you know what you’re trying to learn, you can start thinking about how to learn it.

One way to break down the methods, suggested by Christian Rohrer, is on two axes: Attitudinal vs. Behavioural studies, and Qualitative vs. Quantitative studies. In attitudinal studies, you’re trying to find out what people say about a subject, while in behavioural studies, you’re analyzing what people are actually doing. Qualitative methods tend to be stronger for answering “why” types of questions, while quantitative methods do a better job of answering questions like “how many” and “how much”.

0*m40e5pRUOAigMC1o..png

For example, if you’re asking the question: “How many users give up partway through our sign up process?”, then you might want to consider a more quantitative, behavioural study.

Tomer Sharon has offered a different framework for categorizing research questions, which I’ve found very useful. He suggested that there are broadly three types of questions that UX research is helpful for answering:

  • What do people need?
  • What do people want?
  • Can they use it?

You need to understand what your product should be doing (the needs and wants of users) before worrying about whether the product is doing that thing correctly (usability).

So, which techniques can you use to answer each question type? I’m going to break some of them down below. This is by no means an exhaustive list of user research techniques, and some of these techniques could be used to answer more than one of the question types, but nevertheless it should provide a good starting point.

A quick aside: Before starting any user research project, it’s important to keep a couple of things in mind:



What do people need?

Contextual inquiry

Also called observation, or a site visit, contextual inquiry involves studying people as they go about their everyday lives or tasks. If you’re performing a contextual inquiry study on engineers who produce intelligent piping and instrumentation diagrams, you would go to their office and watch an engineer go about their job. Have them show you how they do things. Ask them questions such as “How do you do that?” or “Can you show me how you did that?” to try to dig more deeply into how they’re accomplishing their tasks.

Observe how users typically accomplish their tasks (Image from  Pexels )

Observe how users typically accomplish their tasks (Image from Pexels)

Take notes about what they’re doing, what difficulties they face, and your own thoughts on it all. You want to try and get into their head to help understand their needs and expectations, but try not to interrupt them more than necessary. As much as possible, you should be trying to observe what would they typically do to accomplish their tasks.

I’m going to lump ethnographic research in here as well. Ethnographic research tends to focus more on social groups and how they collaborate or interact together, but it has a lot of overlap with contextual inquiry and can be useful for answering some similar types of questions.



Interview

In user interviews, you’ll typically meet with users, one at a time, and ask them questions relevant to your project. Usually this is done quite early in the process, and it can be useful for reviewing your product goals. You need practice to get good at interviewing users. Questions often have to be asked in the right way to get good responses, you have to know when to follow up and dig in to an answer, and you have to be able to listen well. You should definitely have an interview protocol or script prepared beforehand.

Interviews can be very powerful, but take skill to do well (Image from  Pexels )

Interviews can be very powerful, but take skill to do well (Image from Pexels)

Remember that during an interview, users can often make up an opinionthat they don’t actually feel strongly about. They can also talk a lot about things that don’t actually matter to them, which can be misleading.

One technique that can help with this is called the critical incident technique. Your interview subjects may remember some specific cases where the product worked particularly well or poorly, and can often provide more vivid details about these incidents. You can use this to get an idea of the strengths and weaknesses of your product when it comes to helping users accomplish their tasks.

You can also use interviews to help you identify questions to ask in a broader questionnaire or survey. On the other hand, you can use interviews after you’ve seen the results of a questionnaire and want to dive into some of those questions more deeply.



Surveys and Questionnaires

Surveys and questionnaires can provide you with some answers similar to what you’d get from user interviews. The downside is that you don’t have the ability to dive more deeply into those answers as there’s no direct interaction with the users. On the plus side, they allow you to get a larger volume of responses, which can open up the opportunity for more quantitative analysis.

Just like in user interviews, you need to be careful about how you’re writing your questions. You’ll want to keep the survey as short as you can while still getting the information that you want; if the survey is too long, you may find that you don’t get as many responses as you’d like. Surveys can be relatively inexpensive to run, and there are a lot of survey tools out there to choose from.



Diary Study

A diary study can be used to see what users do and how they interact with your product over a longer time frame. Diary studies can often be used as a follow up to a contextual inquiry or an interview, to get some additional information from some of the more engaged and informative users that you encountered.

In some cases you may ask users to take photos, scrapbook, or other similar activities. You have to make sure that you give the users good instructions so that they’re clear on what they should be doing, and follow up with them at certain intervals to try to keep them engaged.



What do people want?

A/B testing

In A/B testing, you create two variations of an element of your product, such as a registration form. The variations could be represented by anything from a simple paper prototype to a live website. You then define a metric that will measure the success of each variation that you’ve created. For example, you could measure the bounce rate or the NPS of a landing page.

Two variations of an apple (Image from  Pexels )

Two variations of an apple (Image from Pexels)

Next, you run an experiment with users where one group sees “Version A” and another group sees “Version B”. Using the metric you defined, you’ll measure which version was more successful. That’s the one the users want. You can do this process with more than just two variations, in which case it’s called multivariate testing.

You can use A/B testing to examine a wide variety of things, such as:

  • CTA wording, size, colour, placement
  • What images you’re using
  • The amount of text on a page
  • Layout and style
  • Typography
  • Product descriptions

A/B testing is an excellent and powerful user research tool. There’s a lot of nuance to doing an A/B test correctly, so make sure you’re designing your study appropriately and that you’ve brushed up on concepts like statistical significance so you know when to stop the study.



Rapid prototyping

The idea behind rapid prototyping is to get your designs in front of users early and often. Rapid prototyping is done iteratively, in a three-step process:

  1. Prototype — Create interactive mockups of your interface
  2. Review — Test the prototype with users
  3. Refine — Make adjustments based on feedback
(Image from  Smashing )

(Image from Smashing)

The more you can do this early on, the less you’ll (ideally) need to make changes during development, when it can be far more expensive.

The fidelity of your prototypes can vary. You might start out with paper, and end up with pixel-perfect high-fidelity mockups. In some cases you might even use some live code.

If you’re going the paper route, you can put together a sketching kit and start drawing. You can use products like UI Stencils to give you a head start if you feel like you can’t draw particularly well. You can also use an app like Marvel to make your sketches interactive.

Paper prototypes allow you to test your designs quickly, cheaply, and easily. If you have a real budget crunch, this can be a good way to go. However, it’s worth keeping in mind that it can be distracting for users if your prototype is too low fidelity. Jake Knapp actively discourages paper prototyping with users, saying that:

“If the product doesn’t look real, the customer response won’t be real”

Depending on your skill level with your design tool(s) of choice, you might be able to jump directly to high fidelity prototypes. Whichever direction you take, the important thing is to get prototypes in front of users, learn from how they respond to it, and iterate.

Of course, this isn’t always going to be possible, as some systems are just very difficult to prototype. At ThinkUX, we worked on a VR project where we simply weren’t able to meaningfully prototype and test some parts of the system before implementing them in code.



Focus groups

I could easily write an entire article about the pitfalls of focus groups. There’s no shortage of such articles out there. Among the primary issueswith focus groups are observer dependency, which is when the researcher reads their own feelings into the results of the group discussion. There’s also groupthink, and the fact that some particularly vocal members of the group can make it seem like there’s a consensus even when some quieter members of the group disagree. Further, it’s worth emphasizing once again that there can be a significant difference between what people say and what they do.

Consensus achieved? (Image from  Pexels )

Consensus achieved? (Image from Pexels)

However, when done correctly, focus groups can uncover a lot of very useful information. One of the most interesting results can be discovering a customer language that can help you to understand and describe similar experiences that your users shared. Having a group of users together can also help them to jog memories and ideas in each other that they may not have otherwise remembered.



Can people use it?

Usability test

According to the Nielsen Norman Group, if you do only one type of user research on your project, it should be qualitative usability testing. In usability testing, you recruit some users, come up with a list of tasks for the users to accomplish, and set them loose on your system (or prototype). You can do this formally (create a screener, schedule participants, have them come into your lab, record the session, etc.), or with guerilla usability tactics.

You should test with approximately 5 users, as beyond that you’ll start to see diminishing returns. At the conclusion of a usability test, you’ll often find that parts of your design worked, but that users uncovered problems that you’d never have thought of, and a lot of things need to be tweaked or reworked. This is why it’s so important to test your designs with real people.



Card sorting

Card sorting is a technique that can help a lot with your information architecture. Write down the major features or topics for your system on cards, then recruit some users and ask them to organize the cards into categories that make sense to them. You can do open sorting, where participants put the cards into groups and then name the groups themselves, or closed sorting, where you give them defined categories to sort the cards into. The results of a card sorting study can help you to decide the structure of your website, how to label your menus, how to group your content, and so on.

Card sorting can be done in person with index cards, or using an online tool such as Optimal Sort. If you’re doing the study in person, the most difficult part will likely be analyzing the results, particularly if you’ve recruited a large number of participants.

Card sorting equipment (Image from  Pexels )

Card sorting equipment (Image from Pexels)

You’ll typically recruit more users for a card sorting study than with a usability test, but don’t go overboard here as you’ll tend to get diminishing returns beyond 15 or so users.


Tree testing

Tree testing is another research technique that will help you to assess the information architecture of your product. It can (and likely should) be used along with a card sort. Tree testing helps you to answer questions like:

  • Can people easily find information on your website?
  • Do your menu/category names make sense to your users?
  • Is information categorized in a way that users expect?

In a tree test, users navigate the site to complete tasks (e.g. “buy a sweatshirt”) using only links — the user interface is stripped away entirely. If, through previous research, you’ve found that users aren’t reaching an important page on your website, a tree test can help you to determine if the issue is caused by a problem with your information architecture or by something to do with your UI.

At the end of the study, you’ll end up with metrics such as task success rate, failure rate, time to complete the task, and what routes users took through the site tree before selecting an answer (correctly or incorrectly).



Wrap up

Before you can decide on what research techniques you’re going to employ, you need to figure out what you’re trying to learn, and why you want to learn it.

Again, this is not an exhaustive list of UX research techniques. There are a lot of different ways to attack a given problem, but this article should help give you some idea of what techniques you can use in your research, and what kinds of questions they can help you to answer.

 

Designing Better Form by Gavin Lau

1*240Ats3xTBoR2cKUlqqM6Q.jpg

Forms can be boring, forms can be fun, but when it comes to online user interaction, there is nothing more important than your web form. In fact, it is like a front door to your business and the avenue that visitors utilize to begin their relationship with you and your business. Forms is how your potential clients/visitors/customers get in touch with you, hence creating an effective, high-performance web form that provides your visitors with the right kind of information is the backbone of your online presence.

You can make a form interesting, simple to fill out, but then, the real challenge is to deliver great user experience. Users don’t fill up forms for the fun of it, they fill it up to get results, they are sharing their personal information with some trust put in but generally it often ends up being a pain point for both designers and users. Enhancing functionality of a form requires more than good-looking visuals with robust code, it requires a deep understanding of the user. Here are few incredibly effective pointers that can help fellow designers to improve UX and conversions while designing forms.

We have taken an example of a registration process of a travel portal to help you understand better. It may sound extremely simple but, pay close attention, as the devil is in the detail. This flow highlights 6 most prominent tips that you need to follow while designing a form.



Human Touch — because it’s all about ‘Trust’

Everybody looks for a better experience and this can be achieved only when the content and design elements are well understood by your target audience. Also, while designing it is critical that users feel the strong connection with the brand and not feel alienated or disconnected with machine driven process; adding a hint of personal touch goes a long way.

Keep in mind that design elements such as illustrations, images or icons should be complementing the content, and not overwhelming it. In the below example we have used the image of the travel portal instead of just displaying the form.

0*PlcmEoNCX4Pmed2F.jpg

 

Simple layout makes information easier to process

Human eyes are very picky when it comes to reading, and if too many color and design elements are used, chances are that your user might find it incredibly difficult to focus on the information the business is trying to gather.

Lighter Background color with the focus on content is a smart move. It is also a good idea to have small descriptive elements to help users break down the kind of information required, this just speeds up the input speed and increases the intuitiveness of the form. In the image, data like Username’, ‘Password’ are the descriptive parameters that acts as a guide.

0*J6LCqLZC7-5AXDA0.jpg

 

Increase the Awareness

Always remember, your main goal for designing a form is to create trust in your user and gather information swiftly. Be upfront and honest about each step, this help users understand the time required and keeps them patient. If the form is lengthy, this is an absolute must, because hiding steps will only make the user’s frustrated. Please note that always try to show information which is absolutely necessary and not clutter the form, because, ‘Less is always More’ here.

In the example users can easily identify that they have to go through three simple steps of ‘Identify’, ‘Address’ and ‘Payment’.

0*TF29H_e78pAhVr7A.jpg

 

Be subtle in showing Error Messages

The message should always make your user feel guided and not the other way round. It is important to keep the language conversational, remember it is you who want the information from the user.Error messages shouldn’t make the users feel that they has done a terrible mistake, instead it should come across as a guided tour to reduce the effort and time.

The below example begins with ‘Sorry’ communicating that it might be us and suggests if the user could help us.

0*Dqqlxf1cd9LbDslf.gif

 

Always be available to help the user

Helping out the users when they are stuck will not only diminish frustration but also build comfort and trust. It might be in any form but providing instant help is the key be it in the form of a pop-up, faq or chat box.

In the below example, we have used chat box as one of the option to help users, because at times it is necessary to think one step ahead, the proactive behaviour on your part can enthuse and drive trust factor little further.

0*eMdhETWZYAenJjJc.gif

 

Greet the users on successfully completing the task

Human mind is wired to receive rewards when they complete a task. It is psychologically proven fact that our body releases Dopamine when we are awarded that leads to instant gratification. Hence, greeting your users or congratulating them after successful submission of a form will help them feeling good and satisfied. Fun fact, Dopamine is a neurotransmitter often referred to as the ‘chemical of reward.’

Just a simple ‘Thank You’ message can leave your users with a ‘Feel good’ motion and a smiling face.

0*keff6-fX3ZgcA8vF.gif

Forms may be one of the simplest section of a website or application, but don’t be deceived. They are extremely crucial for a business and many designers mess it up by keeping user experience in the back burner and ends up doing what ‘everyone does’. Forms are the last thing that people want to fill up- keep it short, keep it conversational and do the unexpected.

 

 

Alternatives of hamburger menu by Gavin Lau

1*ebOUifCZPRYMLazoqJTSRQ.png

When it comes to controversial UI, the hamburger navigation pattern has had its fair share of criticism, dismissed as everything from ‘mystery meat’ to ‘the devil’. In this article, we’ll take a closer look at the hamburger icon and alternative navigation patterns.


1. Bottom navigation for mobile

This has become the go-to alternative for teams who wanted to ditch the hamburger menu. It’s been adopted by big boys in the industry — Facebook, Flipagram, Buffer, and many others for good reason. The navigations at the bottom allows the user to see the core features and functionality immediately on the home screen, as well as tells users what page they are on at a glance. Direct access is key here, as users can rapidly switch to different features using a single click and without the need to return to the home screen.

Bottom navigation

Bottom navigation

 

2. Tabs

Similar to tabbed menus on the bottom of the screen, tabs at the top of the screen are a decent alternative. They allow users to have direct access to different features, as well as receive visual cues as to where they are within an app. They may also be more intuitive, as they work similarly to tabs on a browser. However, since they’re located on the upper ⅓ of the screen, they’re not quite as accessible as tabs on the bottom screen are. I have yet to see them used alone, as most apps opt to add them as additional navigation in conjunction with another system.

 

3. Navigation with vertical lettering

Vertical lettering is a brand-new trend these days. It looks increasingly fresh, and naturally stands out from the usual horizontally-oriented content. What’s more, it takes less space: just a narrow line. Nonetheless, it is visually weighty since it is stretched almost to the height of the screen. Compact, informative and zingy — an ideal solution for contemporary designs.

Checkout this website with the trendy vertical lettering navigation bar!

 

4. Progressively collapsing menu

A more sophisticated modification to a hamburger is to design a menu that adapts to the screen width, shows as much of the navigation as possible, and puts everything else under a “More” item. One might then argue that the ‘more’ item isn’t better than the hamburger menu (it’s kind of hidden and its label does not refer to its content at all), however, if you have made the prioritisation right, most users will be looking for one of the four visible items anyway so the navigation experience for the majority will still be improved.

Progressively collapsing menu

Progressively collapsing menu

 

5. Menu scattered around the perimeter of the fold

This one is unique and catches the eye. It is not a widely-used solution, and usually, it requires a proper environment, like a centered layout with perceptible gutters around the structure; nevertheless, it is a good way to give some zest to your navigation.

It’s tricky but when done well, looks really different and amazing! Each corner is reserved for its piece of information: logotype, socials, menu icon and quick access to the ‘about’ section.

 

6. Labeled Menu Button

James Foster of Exisweb ran a few very interesting A/B tests to see if simply tweaking the hamburger menu icon would significantly increase usability and reduce confusion. He found that icons labeled with the word “Menu” significantly increased the amount of clicks as compared to a normal hamburger menu, by as much as 20%.

If you’re not looking to make a big change to your app, but want to increase usability, this would be a good alternative. The Nielsen Norman group also recommend labelling the hamburger menu for increased conversions.

 

 

[IMP] Keep in mind — test whatever you create

Every design is amazing until tested with real users!

Honestly, how much ever we talk about the best practices, fads and trends in the field of UX, you can never be sure how your users might respond to an interface. The response might vary based on a lot of parameters — you users’ exposure to UI trends, the kind of apps they use, the age group they belong to and so much more… It’s best to design versions of form and test them with your users to know which works best for your brand.

We use CanvasFlip to check heatmaps and user videos on any variation in interface. I believe you would benefit from the same. An A/B testing of the same would be quite helpful in taking any decision.

Heat map of bottom navigation interface

Heat map of bottom navigation interface

 

Conclusion

As the saying goes, small details make a big difference; and such a common element of the website design as the menu is capable of enriching the general aesthetic, adding some nice twists to the structure, and enhancing the user experience when it stands out from the crowd. These four types of navigation might not impress your visitors with their incredible dynamic behaviour, nor intricate realisation.


 

When User Personas Just Don’t Matter by Gavin Lau

17-0223-4-steps-develop-member-personas-hero.jpg

I sat down with a new client a few weeks back to discuss an upcoming project of ours. I was set to learn their hopes and dreams, to see what exactly they needed from us. They were super eager to discuss personas—they’d even done a ton of reading on them, and had done some initial discovery of their own to better understand their users. Awesome, right? I listened, nodded, got excited, and then finally asked how they intended to incorporate these personas into their internal design philosophy or system. Suddenly, blank stares.

This is not an uncommon problem. I’ll provide a quick caveat and say, I work almost exclusively with websites and web applications, with the occasional foray into virtual reality. And I’m at an agency, so the problem I encounter is specific, perhaps, to that experience. However, more often than not, user experience personas become functionally useless for my teams. Rather than being used for informing ongoing design decisions, they get stuffed into drawers or handed off to marketing teams, where they don’t meet said-marketers’ needs.

Even when I wind up working with the team to help them strategize how to effectively use or evangelize personas, they’ve still ended up in drawers by the time we’ve checked back in.

So why are these documents not useful for some teams? While I don’t have all the answers, I know I’m just really tired of spending many, many hours on creating things that wind up in drawers. So here are some of the problems I’ve noticed, and then I’ll end with an open question to you all; I know I don’t have the end-all, be-all opinion on these matters.

[Note: this topic came up for me again today because of a cool talk at the upcoming LavaCon in Portland, OR. The talk is A Gameful Approach to Creating Relevant Personas, and should be pretty sweet. If you’re interested in checking out LavaCon Portland November 5 – 8, check out their registration page and use UXBOOTH as a promo code to get $200 off. Yay! They’re our partners and we love them.]

 

Where confusion sets in

We’ve written about them in the past, but this causes a lot of confusion. To quote our own author, Jennifer Leigh Brown, there are two primary kinds of personas (and a few others you can read in her article):

Design or user personas: Focus on goals, current behaviors, skills, attributes, pain points, and environment. They use specific details related to a particular design problem and not generalities.

Marketing or brand personas: Represent user types within a targeted demographic that might use a brand, product or service in a similar way. They are more general and used in relation to marketing messages or sales potential.

Jennifer Leigh Brown, in “One Persona to Rule Them All”

As it turns out, many organizations just don’t have a need for personas to drive design decisions, because most of their design needs just aren’t that complex. I know many folks out there who are a bit more idealistic than I am might bristle on this—and I want to hear from them—but there comes a point where a team just needs to make a decision on where to invest time and resources. For smaller, leaner organizations, design teams might benefit a lot more from investing elsewhere, such as usability testing or accessibility reviews.

User personas are much less actionably useful for less complex products than, say, marketing persons that directly inform communication needs and potential impact.

They’re also not-at-all-cheap to develop; when teams realize this, you know what happens next? They fill in the persona’s blanks with assumptions, which makes them functionally useless. Well, maybe not completely useless, but the personas are now something else entirely—speculation.



A rollout problem

Even if a team has created the most useful, awesome personas, and the product has pretty complex design needs, there are still more hurdles. Most importantly, communication and rollout.

Any teams with stakeholders need to understand the importance of personas and user-centered design (and the time and cost they require), and that’s…well, it’s hard. Especially for non-tech-centric companies (though those are fewer and farther between these days). This means that a very dedicated and enthusiastic evangelist will need to “sell” the personas to everyone, not just design nerds.

Maybe for the big sexy products this isn’t a problem, but it sure is for the everyday Janes and Joes out there just trying to redesign their not-overly-complex websites. It’s not worth their time and limited resources to invest energy into something that will require such heavy lifting of stakeholder management.


 

Why Successful Startups Stumble at 40+ Employees by Gavin Lau

1*6Bm4LAzJw_QkvrpOgweBYw.jpg

Last week I got a call from Patrick an ex-student I hadn’t heard from for 8 years. He was now the CEO of a company and wanted to talk about what he admitted was a “first world” problem. Over breakfast he got me up to date on his life since school (two non-CEO roles in startups,) but he wanted to talk about his third startup — the one he and two co-founders had started.

“We’re at 70 people, and we’ll do $40 million in revenue this year and should get to cash flow breakeven this quarter. ”

It sounded like he was living the dream. I was trying to figure out why we were meeting. But then he told me all about the tough decisions, the pivots and how he had to fire his best friend he had to do to get to where he was. He had been through heck and back.

“I made it this far,” he said, ”and my board agreed they’d bet on me to take it to scale. I’m going to double my headcount in the next 3 quarters. The problem is where’s the playbook? There were plenty of books for what to do as a startup, and lots of advice of what to do if I was running a large public company, but there’s nothing that describes how to deal with the issues of growing a company. I feel like I’ve just driving without a roadmap. What should I be reading/doing?”

I explained to Patrick that startups go through a series of steps before they become a large company.

1*oVcUVHqmmRJP86KuN7NHVg.jpg

 

Search

In this first step, the goal of a startup is to search for a repeatable and scalable business model. It typically takes multiple iterations and pivots to find product/market fit — the match between what you’re building and who will buy it.

You’ll realize you’re ready to exit the Search step when you have customer validation:

  • You’ve found a sales channel that matches how the customer wants to buy and the costs of using that channel are understood
  • Sales (and/or customer acquisition in a multi-sided market) becomes achievable by a sales force (or network effect or virality) without heroic efforts from the founders
  • Customer acquisition and activation are understood and Customer Acquisition Cost (CAC) and Life Time Value (LTV) can be estimated for the next 18 months
Startups in Search mode have little process and lots of “do what it takes.” Company size is typically less than 40 people and may have been funded with a seed round and/or Series A.

Most startups die here.



Build

At about north of 40 people a company needs to change into one that can scale by growing customers/users/payers at a rate that allows the company to:

  • achieve positive cash flow (make more money than it spends) and/or
  • generate users at a rate that can be monetized…
Unfortunately as you hire more people, the casual, informal “do what it takes” culture, which worked so well at less than 40 people becomes chaotic and less effective.

Now the organization needs to think about:

  • culture
  • training
  • product management
  • processes and procedures, (i.e. writing the HR manual, sales comp plan, expense reports, branding guidelines, etc.)

This Build phase typically begin with around 40 employees and will last to at least 175 and in some cases up to 700 employees. Venture-backed startups will often have a Series C or D or later rounds during this phase.


Grow

In the Grow phase the company has achieved liquidity (an IPO, or has been bought or merged into a larger company event) and is growing by repeatable processes. The full suite of Key Performance Indicators (KPI’s) processes and procedures are in place.

At this stage, a founder is just lucky if you’re not the ex-CEO.




What breaks in the Build stage?

I pointed out to Patrick that he was in the middle of the transition from Search to Build. And I suggested that he was lucky to be encountering this problem as a 21st century startup rather than one a decade or two ago.

In the past, when venture-funded startups told their investors they’d found a profitable business model, the first thing VC’s would do is to start looking for an “operating exec” — usually an MBA who would act as the designated “adult” and take over the transition from Search to Build. The belief then was that most founders couldn’t acquire the skills rapidly enough to steer the company through this phase. The good news is that VC firms are beginning to appreciate the value of keeping the founder in place.

I reminded Patrick that the reality is startups are inherently chaotic. As a founder he got the company to the Build phase because he was able to think creatively and independently since conditions on the ground changed so rapidly that the original well-thought-out business plan became irrelevant.

He managed chaos and uncertainty, and took action rather than waiting around for someone on his board to tell him what to do, and his decisions kept his company from dying.

Now Patrick would have to shift himself and the company. In this Build phase he was going to have to focus on how to thoughtfully start instituting things he took for granted in the Search phase.

He was going to have build into his organization training, hiring standards, sales processes and compensation programs, all the while engineering a culture that still emphasized the value of its people.

Patrick took a bunch of notes, and said, “You know when I figuring out how to search for a business model, I read the Startup Owners Manual and Business Model Generation, but where are the books for this phase? And come to think of it, in the Search phase, there are Incubators and Accelerators and even your Lean LaunchPad/I-Corps class, to give us practice. What resources are there for me to learn how to guide my company through the Build phase?”


Surviving the build stage

I realized Patrick just hit the nail on the head. As chaotic as the Search phase is in a startup, you are never alone. There are tons of advice and resources. But in the past, the Build phase was treated like a smaller version of a large company. Operating execs hired by investors used the tools they learned in business school or larger corporations.

I suggested it was time for Patrick to consider four things:

  1. Read the sparse but available literature that did exist about this phase. For example, The Four Steps to Epiphany Chapter 6, Company Building, Ben Horowitz’s The Hard Thing About Hard Things (a series of essays) or Geoff Moore’s classic Crossing the Chasm
  2. If he already had an advisory board (formal and/or informal), add CEO’s who have been through this phase. If not, start one
  3. Get a one-one CEO coach or join a CEO peer group
  4. And potentially the most difficult, think about upgrading his board by transitioning out board members whose expertise was solely rooted in the Search stage

As we finished our coffees, Patrick said, “Thanks for the advice, though I wish someone had a methodology as simple as the Lean Startup for how to scale my company.”


Lessons Learned

  • Startups go from Search to Build to Scale
  • The Search to Build phase happens ~40 people
  • Very different management tools and techniques are needed to guide your company through this new phase
  • You need to reset your board and your peer advisers to people who know how to manage building a company versus starting one


     

3 alternatives to the floating action button by Gavin Lau

1*2pSLAcgEGivIQhgbkp2dOw.png

UX-friendly alternatives to the Floating Action Button, Google’s cute UI design element that doesn’t always cut the mustard

Everybody loves the Floating Action Button, right? That little action button at the heart of Google’s Material Design language is appealing, useful and makes for streamlined UI design.

But cute as it may be, the Floating Action Button has critics as well as admirers. Possibly “detrimental to the overall UX experience of (an) app” according to one commentator, the Floating Action Button isn’t always the right UI element to use.

Justinmind hunted down some user-friendly alternatives to the floating action button, and found out some interesting stuff about UI design patterns along the way.



What is the Floating Action Button?

Back in 2014, Google launched Material Design, a design language that tries to unify the user experience of all Android web and mobile app users. You’ll recognize Material Design by it’s heavy use of grid and card layouts, animated transitions and, most strikingly, illusion of depth created by smart shadows. The UI design system harks back to the paper and ink days when things had “physical surfaces and edges”, but the result is clean and modern.

The Floating Action Button (or FAB to its fans) is one of the most striking elements of the Material Design UI language. It’s that colorful button you’ll see in Android apps, often on the lower right of the screen. It’s just kind of floating there, apparently just situated somewhere above the rest of the user interface.

Credit:  material.io

Credit: material.io

Functionally, the Floating Action Button represents the most common user action on the screen. Take the example of the home screen of Gmail’s Android app. When a user opens Gmail, the action they are most likely to perform is that of writing a mail. And that’s exactly what the FAB calls them to do: the UI element is bold in color, eye-catching and intuitive. The little pen icon helps with the last part.




Whats so good about the Floating Action Button?

The Floating Action Button’s biggest selling point is that it’s a recognized, standardized UI navigation pattern. Standardized navigation patterns lighten users cognitive load substantially and are predictable. Minimum cognitive load means maximum usability, as pointed out by Kathryn Whitenton of NN Group.

The Floating Action Button also allows Android app prototypers and designers to improve design consistency. It’s pretty convenient, as a UI designer, to know that if you’re prototyping an Android app, you have a universally spoken design language at your disposal, for free.

Add to that the admirable concision of the floating action button. It captures the core function of your appear screen in one simple, space-saving UI element. And it’s attention-grabbing, helpfully guiding users through the app’s functionality.




If the Floating Action Button is so great, why do we need UX-friendly alternatives?

Good question. Like all UI elements, the Floating Action Button works for some UIs more than others. Here are some occasions when a Floating Action Button detracts from usability rather than enhancing it.

  • Sometimes floating action buttons can hide content that people need to see. If you have a floating button that covers part of an email, or the time that it was sent, this can cause frustration among users as it blocks important content.
  • Perhaps you want to include more than one option behind the button. For example, the floating action button may interfere with other UI elements on the page such as non-floating, less fabulous buttons.
  • Direct conflict with Apple’s iOS 10 Human Interface Guidelines (HIG). If you’re making an iOS app then stay clear of the floating action button. While FABs make great CTAs, Apple tends to prefer top-right navigation.
  • It can mask the true primary action of a screen if not used judiciously. Take Gmail, whose floating action button makes little sense when you consider that most people prefer to read emails on the go and can compose a reply within the opened email itself, making the button almost obsolete.
  • A floating action button without an icon is mystery meat but icons are hard to make intuitive. Icons are understood by a user’s previous experience and since there is no standard, getting icons right is hard enough, let alone making sure they’re universally understood.





3 UX-friendly alternatives to try in your next app wireframe or prototype

Dynamic action button

A dynamic action button is a button which appears when a particular event occurs. For example, you might want to hide the floating action button when you scroll so that it doesn’t get in the way of important content (or accidentally click it resulting in frustration), having it reappear when the action stops. No good UX designer wants to pollute a page with unnecessary items or content, so a button that hides itself when another action is performed and reappears intuitively when needed is a good option.

This is a nifty alternative, especially if you don’t want your action button to block important content.


Floating action expansion button

One way to really exploit the floating action button is to add more options within the button and make it expandable. An expandable FAB’s additional options must, of course, be related to the purpose of the floating action button otherwise it can cause major confusion. But don’t exhaust your users with a heap of extra options, keep it simple — a maximum of 3 should suffice. Anymore may create decision fatigue.

1*jSCtVcpUQnYNwxck1Pcp1w.gif

 

Credits: Ehsan Rahimi

Nick Babich highlights how the floating action expansion button, however, can be an opportunity transition to a new screen, giving you a lot more space to put content. For example, in your notes app the floating action button can expand into a new sheet to compose a new note. These sort of intuitive transitions are used when creating new content and are a useful and practical way to add more options without necessarily hindering the user experience.

Bottom or top toolbar

Sometimes the most obvious solution is the best one. The trusty old toolbar can be used to replace the floating action button in apps that are content-heavy or have more than one primary action. A bottom toolbar is within striking distance of the thumb zone and doesn’t conflict with iOS UI layouts. With Justinmind, prototyping navigation bars is simple and heaps of fun.

If you do decide to replace a floating action button with a toolbar, take care not to mix Actions with Navigation in the bar, and ensure you’re using recognized, consistent icons. And be sure to create a strategic and consistent information hierarchy that makes sense.




Conclusion

The right UI navigation depends on the screen that you’re using. Sometimes a smaller screen just screams out for a glorious, useful floating action button. Other times, the floating action button needs to take a backseat when there’s plenty of real estate to work with, such as in web design. Whichever option you decide to implement in your interactive prototypes, be sure to stay consistent and always have the end user in mind when designing. After all, what’s cool today can be a functional nightmare tomorrow.

 

You don’t need to know everything about UX - This is a story about anxiety by Gavin Lau

1*uolQeS3oH07YWIshMSFu1w.jpg

“You don’t need to know everything about UX”.

I find myself saying this to other people quite often. You don’t need to be a specialist in all possible verticals within User Experience Design.

And you probably can’t.

A lot of people are starting in UX just now. The high level of attention our discipline has been getting, and the increasing awareness around the importance of designing intuitive, efficient, easy-to-use experiences, ended up bringing a wave of new professionals to UX Design in the last few years.

But UX is huge.

And it overlaps with a number of other disciplines.

It doesn’t take long for newcomers to realize how wide User Experience Design can be, and how as UX Designers we wear many different hats within a given project. It’s quite common to see the UX Designer involved in a project from the kickoff meeting all the way through launch day — and in most cases way beyond that: tracking, improving and iterating new versions of the product after launch.

Throughout this process, there are hundreds of meetings, hallway conversations and decisions being made that will have an impact in the user’s experience — and sometimes they involve strategists, data analysts, visual designers, copywriters, brand designers, technologists. The UX Designer is usually involved in each one of these conversations, in each one of these phases, advocating for the user’s interests when the team is about to make a decision that will impact the experience. Through this process, it is important that UX professionals have enough vocabulary and technical knowledge to be able to engage in healthy discussions with other disciplines — and help shape those decisions before it is too late.

Once their first project is finished, a novice UX designer can start to feel overwhelmed with the breadth of technical knowledge needed to design and build a digital product.

But sometimes, all the exposure to other areas can lead to anxiety.

How am I supposed to learn about each one of these tangent disciplines (tech, metrics, strategy, copywriting, branding), while still performing the tasks that are expected from me as part of my UX duties (interaction design, information architecture, usability testing, etc.)?

 

The million-dollar advice

You don’t need to learn all of it from the start.

A lot of people get overwhelmed with the amount of information, jargon, and technical details surrounding UX. This sounds obvious, but it has to be said: choose a more specific place to start from.

Understand your natural abilities as a person, and start from there.

  • Do you enjoy talking to people and feel comfortable doing that? Start moderating user research and user testing sessions.
  • Do you prefer designing simple, innovative interactions? Start with wireframing and sketching.
  • Do you like numbers and feel comfortable speaking to that? Start getting involved more closely with analytics and metrics.
  • Do you like to write and appreciate how the choice of words can impact the user’s experience? Start partnering with a professional copywriter to learn from them.
  • Etc, etc, etc.

But make sure you choose a starting point.

Don’t force yourself to learn everything at the same time. You will end up in a loop of anxiety that will only accentuate weaknesses and knowledge gaps, not your strengths.

If you don’t have a particular preference, that’s fine too. As time goes by, you will start to familiarize yourself with the multiple disciplines within User Experience and will naturally start leaning toward one area or another. Keep an eye on that, and set yourself goals of diving into specific UX verticals one by one.

 

The good old “generalist vs. specialist” dilemma

  • A Generalist knows a little bit of everything. From interaction design and usability, to being able to articulate with clarity the UX strategy, to knowing how to apply design thinking methods to a project, and someone who can also plan, run, analyze and apply user research insights into the design process.
  • A Specialist might decide to dive deeper into one or two of these verticals, and learn everything they can possibly learn about that area of focus. Specialists are more common in larger companies that have a large UX team and can afford specialization.

If you’re interested in reading more about generalists vs. specialists, and its advantages and disadvantages, check out this article from UX Matters:

But even that choice between Specialist and Generalist is not something you have to make on day one.

Give yourself time.

Try different things.

You don’t need to make that decision today.

You don’t need to learn all of it now.

No one really knows everything about UX. At least not in depth.

Don’t feel guilty for what you don’t know.

Be proud of what you know.

“The person who removes a mountain begins by carrying away small stones.” — Chinese Proverb

Why you should talk to a designer earlier than you think by Gavin Lau

1*YANKlzBJxpsVWxC5UCTj0A.jpeg

Designers design. You know that you should contact a designer when you need to have something designed (and when you have the budget for it). That’s common sense (well, except maybe the budget part).

The thing is:

  • Designing is problem solving. When you think about it this way, it changes your perspective on when you can contact a designer.
  • No one is born with the skill of buying design services. It can be intimidating. It’s a skill, so it needs to be learned. It requires time and money and attention and building trust. It sounds like a big deal. Well, it is. And mature designers are equipped with tools to help you become fantastic at buying design services. Know that and contact a designer when you feel you should do so but don’t know where to start.

Here are three things designers can help you with:

1. A white sheet of paper and constraints

A white piece of paper is probably the cheapest item that can be intimidating. You don’t even need a physical piece of paper — a white sheet of digital paper from Microsoft Word will do the job.

You may think you are in a place where you don’t have too many restrictions. You may think you can afford everything and that money does not play a role. You may think that time is irrelevant and that the most important thing is quality. You might think… a lot of things. These delusions can paralyze you, stop you, send you into hibernation, and feature you in “Groundhog Day”. However, the truth is that there are limitations in each project. Limitations that allow you to constructively fill even the most intimidating white piece of paper. In a finite amount of time. In a satisfactory manner.

Part of the designer’s job is to build constraint systems that, over time, make it easier to make further decisions and ensure coherent work results.

Think about talking to a designer if you feel uncomfortable with your white piece of paper, if you don’t want to face it alone, or when you feel like you’re starring in “Groundhog Day”. There is no reason to wait until you have something “concrete” to draw. Design begins before anyone even touches a piece of paper.


2. Data and goals

There are two types of people: those who collect data and those who don’t. There are two types of people who collect data: those who analyze it and those who don’t. There are two types of people who analyze data: those who do it meaningfully and those who don’t.

To meaningfully analyze data, you must have clearly defined goals. To have clearly defined goals, you must have clearly defined metrics. It’s next to impossible to improve something that you are not measuring.

Including the simplest Google Analytics tracking code in your website or application is not enough.

Goals aren’t easy, either: They must be at least SMART (Specific, Measurable, Achievable, Realistic, Time–bound).

A mature designer can also help you in your journey on this topic.


3. Roadmaps and actions

A designer most likely has a different vision of your project’s roadmap than you. Questions to answer and hypotheses to test instead of a list of the software functions? I think this different vision may interest you.

Also, an integral part of the design process is defining a design problem. Only after getting to know the problem can one explore potential solutions and measures to solve it. Designers have experience in this.

You don’t have to do this work alone, either.


 

Rethinking drag and drop - Taking something basic and making it beautiful by Gavin Lau

1*QbeyTnZLPpDD0kdWfWgCrQ.gif

Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.


Physicality

The core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best illustrated through contrast — so let’s explore some standard drag and drop behaviour and how we have tried to do better.

jquery-sortable

jquery-sortable

This example uses the amazing jquery-sortable. It’s drag and drop mechanism is fairly standard and serves as a good reference point.


Movement

instant movement is standard

instant movement is standard

When dragging items around, other items disappear and reappear as needed. Also, when you drop an item it appears in its new home position immediately.

a more natural movement

a more natural movement

For a more natural drag we animate the movement of items as they need to move out of the way while dragging to more clearly show a drags effect. We also animate the drop of an item so that it animates into its new home position. At no point is an item instantly moved anywhere — regardless of whether it is dragging or not.


Knowing when to move

It is quite common for drag and drop interactions to be based on the position that user started the drag from

impact based on selection point

impact based on selection point

In this example the user is grabbing the top right corner of the first item. The user needs to drag a fair way down before the second item moves to its new position. This is because the calculations are based on the initial selection position of the user.

impact based on centre of gravity

impact based on centre of gravity

In react-beautiful-dnd a dragging items impact is based on its centre of gravity — regardless of where a user grabs an item from. A dragging items impact follows similar rules to a set of scales ⚖️. Here are some rules that are followed to allow for a natural drag experience even with items of flexible height:

  • A list is dragged over when the centre position of a dragging item goes over one of the boundaries of the list
  • A resting drag item will move out of the way of a dragging item when the centre position of the dragging item goes over the edge of the resting item. Put another way: once the centre position of an item (A) goes over the edge of another item (B), B moves out of the way.



Accessible

Traditionally drag and drop interactions have been exclusively a mouse or touch interaction. react-beautiful-dnd ships with support for drag and drop interactions using only a keyboard. This enables power users to drive their experience entirely from the keyboard. As well as opening up these experiences to users who would have been excluded previously.


Respecting the browser

In addition to supporting keyboard, we have also audited how the keyboard shortcuts interact with standard browser keyboard interactions. When the user is not dragging they can use their keyboard as they normally would. While dragging we override and disable certain browser shortcuts (such as tab) to ensure a fluid experience for the user.



Carefully designed animations

With things moving a lot it would be easy for the user to become distracted by the animations or for them to get in the way. We have tweaked the various animations to ensure the right balance of guidance, performance and interactivity.


Maximise interactivity

react-beautiful-dnd works really hard to avoid as many periods of non-interactivity as possible. The user should feel like they are in control of the interface and not waiting for an animation to finish before they can continue to interact with the interface.


Dropping

When you drop a dragging item its movement is based on physics (thanks react-motion). This results in the drop feeling more weighted and physical.


Moving out of the way

Items that are moving out of the way of a dragging item do so with a CSS transition rather than physics. This is to maximise performance by allowing the GPU to handle the movement. The CSS animation curve has been designed to communicate getting out of the way.

How it is composed:

  1. A warm up period to mimic a natural response time
  2. A small phase to quickly move out of the way
  3. A long tail so that people can read any text that is being animated in the second half of the animation
animation curve used when moving out of the way

animation curve used when moving out of the way

 

Plays well with others

We have done a lot of work to ensure that things work intuitively while providing flexibility.


Sloppy clicks and click blocking

When a user presses the mouse down on an element, we cannot determine if the user was clicking or dragging. Also, sometimes when a user clicks they can move the cursor slightly — a sloppy click. So we only start a drag once the user has moved beyond a certain distance with the mouse down (the drag threshold) — more than they would move the mouse if they where just making a sloppy click. If the drag threshold is not exceeded then the user interaction behaves just like a regular click. If the drag threshold is exceeded then the interaction will be classified as a drag and the standard click action will not occur.

This allows consumers to wrap interactive elements such as an anchor and have it be both a standard anchor as well as a draggable item.


Focus management

react-beautiful-dnd works hard to ensure that it does not impact the usual tab flow of a document. For example, if you are wrapping an anchor tag then the user will still be able to tab to the anchor directly and not an element surrounding the anchor. We add a tab-index to draggable items to ensure that even you are not wrapping something that is usually interactive (such as a div) then the user will still be able to access it with their keyboard to drag it.



Not for everyone

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for vertical and horizontal lists. Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So this library might not be for you depending on what your use case is.



Engineering


Clean, powerful API

Before this library was released a lot of time an attention was given to crafting a declarative, clean and powerful api. It should feel really easy to get started with and provide the right level of control over the whole drag experience. It is based off a lot of research into other libraries as well as collective experience in building drag and drop products. I won’t go into all the details of the api here — but you can find a comprehensive guide repo


Performance

react-beautiful-dnd is designed to be extremely performant — it is part of its DNA. It builds on prior investigations into React performance that you can read about here and here. It is designed to perform the minimum number of renders required for each task.


Highlights

  • Using connected-components with memoization to ensure the only components that render are the ones that need to — thanks react-reduxreselect and memoize-one.
  • All drag movements are throttled with requestAnimationFrame — thanks raf-schd
  • Memoization is used all over the place — thanks memoize-one
  • Conditionally disabling pointer-events on all draggable items while dragging to prevent the browser needing to do redundant work — you can read more about the technique here
  • Non primary animations are done on the GPU
minimal amount of react updates

minimal amount of react updates

minimal amount of browser paints

minimal amount of browser paints

 

Tested

react-beautiful-dnd uses a number of different testing strategies including unit, performance and integration tests. Testing various aspects of the system helps to promote its quality and stability.

While code coverage is not a guarantee of code health, it is a good indicator. This code base currently sits at ~95% coverage.


Typed

This codebase is typed with flowtype to promote greater internal consistency and more resilient code. It also provides for a greater developer documentation story as the whole api is typed.




Final words

We think the web will be a more beautiful and accessible place because of react-beautiful-dnd. For more information and examples 🎉 head over to the repository.


 

The 90% agreement rule by Gavin Lau

1*hQRqfLITMp9b1ID_WLoavw.png

I can recall many examples when I’ve had a conversation, meeting or discussion with someone (who I generally agree with) turn into a fully fledged debate. We often describe these conversations as ‘going sideways’ as that’s how it feels to both parties. It’s a feeling that you’re marching alongside each other and then suddenly, someone takes a hard right turn. Both parties usually walk away from those conversations with the sense ”I thought we were pretty aligned — turns out we’re not”. Sometimes this is true - there’s a fundamental disagreement that just surfaced. But in the vast majority of these cases, I believe the feeling of misalignment is more one of perspective than a real difference of opinion.

I’ve witnessed this a during the workplace but perhaps given the current political and social climate, it’s happening a lot more outside as well. Here’s an observation I’ve made about these types of situations, as well as how I now try to handle them. The observation is this:

We spend 90% of our time, talking about the 10% of things we disagree on

Expressed visually — it looks like this.

Stop for a minute. Think back over the past week and see if you can recall an example of this. If you can, the counter-productiveness will feel obvious. But to be specific about the downsides of this phenomenon, here’s why it’s not awesome:

  • All the creativity and energy goes into arguing and articulating the minor differences in interpretation or point of view, rather than building on shared beliefs and values
  • If there are people who are dependent on you to resolve a conflict, their progress is blocked as there’s no clarity on where there is agreement
  • You feel more misaligned / distant / out of sync with someone than you need to be. This can reduce the likelihood you’ll want to engage with that person in the future

These discussions often painful or “low bandwidth” … If you’re a leader or manager at work, the issue can sometimes stem from prioritizing ‘being heard’ over ‘creating clarity’. But if we flip that, our role becomes obvious — to provide maximum clarity on wherever there is agreement (and where there is not). If we rethought our roles, we’d find the % of agreement is higher than we thought.

This doesn’t mean we have to agree on everything. Creating space for disagreement is actually really important — it helps flesh out important differences that can be amplified if wallpapered over or dismissed. This is captured well in Amazon’s “disagree and commit” leadership principle. But for me, sequencing is super important… Create clarity (and build on) wherever there is ‘about 90% agreement’ first— then come back around and address the disagreements after. Articulating this through a series of steps, this is how I try [not always successfully] to manage a discussion:

  1. Actively look for common ground by asking “what do we agree on”, “what shared points of view do we have”, “where are we aligned”? As these are shared, write them down. The goal isn’t to find agreement on everything, but to look for areas where there is 90% agreement and spend time on those. As disagreement emerges, make sure these areas are articulated / written down but resist the urge to debate or resolve them at this point.
  2. As the list of agreed upon items grows, spend time articulating them to make sure it’s actually the case. Have individuals try to express the other person’s point of view to make sure it’s roughly aligned. Perfection isn’t required — remember, we’re looking for 90% agreement. If there’s someone / something dependent on a decision then ask “is there enough of a shared view here for this [team / person / decision] to move forwards?”. If so, make sure that happens.
  3. Finally, loop back around to where there is actual disagreement and work on that.

There’s lots we could say now about how to resolve real differences (#3), how to break deadlocks and making sure a decision isn’t ‘the average of all opinions’ but that’s out of scope for this article. For now, my main hope is to help those situations where common ground is closer than you may believe or perceive.

So, the next time we feel compelled to explain to someone how wrong they are or someone feels the need to do the same to us, before launching into an incredulous debate we can first ask ourselves “what do we actually agree on?”. Once in a while the answer will be “nothing at all” — but if we can lean into that question with curiosity, we may find the answer is “actually, quite a lot”.

 

 

Voice Interfaces: New Era Of Human-Computer-Interactions by Gavin Lau

Voice interaction is the ability to speak to your devices, have them proceed your request and act upon whatever you’re asking them. Today voice user interfaces are everywhere: we can them in smartphones, TVs, smart homes and a range of other products. The rapid development of voice interaction capabilities in our daily lives makes it clear that this technology will soon become an expected offering as either an alternative or even a full replacement to, traditional graphical user interfaces.

According to Gartner, by 2018, 30 percent of our interactions with technology will happen through conversations with voice-based systems.

Apple’s Siri, Amazon Echo and Google Now, which have been available for a few years, prove that this technology is no longer in its infancy.

Apple’s Siri, Amazon Echo and Google Now, which have been available for a few years, prove that this technology is no longer in its infancy.

Voice interaction is the next great leap forward in UX design.

In this post, we’re going to explain why voice interfaces will be the next big thing and what does this trend actually mean for designers of the user experience.



What Are Driving Forces Behind Voice Interaction

Before we dive into the specific implications of voice interaction systems or design aspects for them, it’s important to understand what’s lead to rapid adoption of this new interaction medium:


Technology is Ready

It’s clear that improvements in natural language processing have set the stage for a revolution. In 2016 we saw a significant breakthrough in natural language processing, and we’ve reached a point where advances in computer processing power can make speech recognition and interaction a viable alternative to visual interfaces. Another important thing is a number of devices that support voice interaction — today almost a 1/3 of the global population is carrying powerful computers that can be used for voice interaction in their pocket, and it’s easy to predict that a majority of them are ready to adopt voice interfaces as their input method of choice.

Image credit: Samsung

Image credit: Samsung

Natural Means Of Interaction

People associate voice with communication with other people rather than with technology. This means that voice interaction systems can be a more natural way of interaction for the majority of users.

Image credit: Google Mobile Voice Survey 2014

Image credit: Google Mobile Voice Survey 2014

People Want a Frictionless Experience

To interact with a voice interaction system all users need to do is to simply speak to the devices and be understood. In comparison with graphic user interfaces (GUI) where users have to learn how to interact with a system, voice interaction systems can significantly reduce the learning curve.

Even the most advanced graphical user interface still requires humans to learn a computer’s language.

Even the most advanced graphical user interface still requires humans to learn a computer’s language.

Opportunities For Business

Adding Personality To Branded Content

Companies can leverage the medium of voice interaction as an extension of their personalities. Gender, tone, accent and pace of speech can be used by experience designers to craft a particular customer experience with their brand. For example, kids may finally get to talk directly to their favourite cartoon characters.


Make Experience More Personalization

Using voice-based system it’s possible to create a deeper personal connection to the system. Even today if you look at the online reviews for Amazon’s Echo speaker, it’s clear that some people establish a close bond with their device in a way that more resembles a pet than a product.

Samantha from Her

Samantha from Her


Voice Interfaces Aren’t a New Direction, They Just a New Step In UX Design

If you are new to designing voice user interfaces, you may quickly find yourself unsure of how to create great user experiences because voice interaction represents the biggest UX challenge since the birth of the iPhone. They are very different from graphical user interfaces and designers cannot apply the same design guidelines and paradigms. But while designing for voice differs from traditional UX, classic usability principles are still critical to the quality of the user experience.


Understand The Basics Of Human Communication

To design great voice user interfaces, you must handle the expectations users have from their experience with everyday conversations. And for that, we must understand the principles that govern human communication: how people naturally communicate with their voices.


Understand User’s Intent

Voice-based interactions between a user and a machine can lead (potentially) to infinite possibilities of commands from a user. While designers may not be able to predict every possible user command, they need to at least design an infrastructure that is contextually driven. For that, it’s important to start with a use case (a reason for interacting in the first place) and try to anticipate users intent at each point in the conversation (to shape the appropriate response).

The processing flow of a comprehensive speech interface. Image credit: API

The processing flow of a comprehensive speech interface. Image credit: API

Provide Users With Information About What They Can Do

While on a graphical user interface, a designer can clearly show users what options they can choose from, it’s impossible to do this on a voice interface. In voice user interfaces, it’s almost impossible to create visual affordances. Consequently, looking at a device that supports voice interaction, users will have no clear indications of what the interface can do or what their options are. Therefore, it’s still possible to provide the user with the options for interaction. For example, if you design a weather app you can make it say: “You can ask for today’s weather or a forecast on this weekend.”


Limit the Amount Of Information

While with graphic user interfaces you can present a lot of different options, with verbal content, you need to keep the information brief so that the user does not become confused or overwhelmed. It’s recommended that you don’t list more than 3 different options for an interaction.


Craft Meaningful Error Messaging

Error handling is an essential component of designing thoughtful voice interactions. The wide variation in potential responses places much more emphasis on the importance of crafting meaningful error messaging that can steer the conversation with the user back on track if something goes wrong.


Use Visual Feedback

It’s recommended to use some form of visual feedback to let the user know that the system is ready and listening. Amazon’s Echo is a good example of this: on hearing a user say ‘Alexa’, the bluish light swirls around the top rim of the device, signalling that Alexa’s ‘all ears.’

Image credit: thewirecutter

Image credit: thewirecutter


Conclusion

Voice is the next big platform — it represents the new pinnacle of intuitive interfaces that make the use of technology more natural for people. Properly designed voice interfaces lead users to accomplish tasks with as little confusion and barriers as possible. And the good news is that UX designers already possess the skills they need to design effectively for voice.

 

EMPATHY MAPS: THE BUSINESS OF PUTTING USERS FIRST by Gavin Lau

Working in UX, we take empathy for granted. To us, it may feel like an overused buzzword, but we don’t realize that the majority of the business world hasn’t heard “empathy” within the context of a professional organization before.

While we start the design phase thinking about customer needs and goals, this process hasn’t been mainstreamed to other practices (and if it has, it’s inadvertently). 
 

“Empathy feels overused in UX, but it’s a word that never comes up in other disciplines.”


Attend orientation and training for a job in business development, software engineering, product or project management, or even sales and marketing, and it’s highly unlikely that the word “empathy” will be used at all—it just doesn’t come up.

All is not lost! Empathic thinking has started creeping its way into business concept planning and product strategy with empathy maps.




What is an empathy map?

An empathy map is a tool to get to know the target audience (hint: it isn’t you) in order to align the business strategy and value proposition with the customer’s wants, needs, goals, and feelings.

Simply, empathy maps get stakeholders thinking about the users they want to serve and not about the product they want to build.

The canvas shows all of the user-minded attributes on a canvas like the one below:

Then, through collaboration, sticky notes, and research, questions like these are answered to complete the canvas:


What is the customer thinking and feeling?

  • What is the customer concerned about or afraid of?
  • Is the customer satisfied? Why or why not?
  • What are the customer’s priorities?
  • What are the customer’s dreams and aspirations?
  • What causes an emotional reaction for the customer?


What is the customer hearing?

  • What or who influences the customer?
  • Is your customer easy to influence?
  • Where does the customer get their information?
  • What information channel does your customer use the most?


What is the customer seeing?

  • Does your customer spend more time in the public or in private?
  • What does your customer’s environment look like?
  • How does the customer interact with their environment?


What is the customer saying and doing?

  • How does the customer portray themselves in front of others?
  • What words does the customer use when talking?
  • What information does the customer withhold or leave out when sharing with others?
  • What is the gap between what they say and how they act?


What are the customer’s pains?

  • What obstacles does the customer need to overcome?
  • What frustrations are on the horizon for the customer?
  • Why hasn’t the customer been able to reach their goals?


What does the customer gain?

  • What methods does the customer use to achieve success?
  • How is success measured and what does it look like?
  • What are the short and long term goals of the customer?

Think about designing a website (layout, content, and all). You start with researching and learning about what the website visitors’ goals are, why they’re on your site (even why they’re here instead of a different website), what’s important to them, and what thoughts and feelings are running through their minds when on your site.

Why would laying out a business be different?
 

“UX can’t save a business that wasn’t designed with customers in mind.”


No matter how polished and thorough your UX work is, none of it will make a difference if the business wasn’t designed with the customer in mind. If we wait until our work shows up in tasks during the design and build phase of a project to voice the importance of user-centricity, we’re waiting too long.

How do we get the point across early on? By using empathy maps.




Introducing empathy internally

It’s one thing to work with a company starting from scratch to recommend putting users first, but it’s a whole different game to convert existing businesses to have a user-first culture. When working with businesses that don’t have an empathy map or early-stage user research process, it can be an intimidating mountain to climb. But getting stakeholders to buy in to empathy maps is a great steering tool to move that way.

Remember that it’s your job as a UXer to advocate for the user, so even though using customer research in early business decisions may seem out of bounds or like uncharted territory, it’s actually right in line with your job duties.

Image from  Inside Design: WeWork .

Still uncertain about what to say? Take a chapter out of your own UX book and communicate the value an empathy map brings—and not just what it is—with these key benefits:

  • The business will benefit with a glimpse into product-market fit early on in decision making
  • Use insights to create a product roadmap with features that will actually bring value and be used
  • Marketing and user acquisition teams already have a headstart on strategy with information on who they’re targeting
  • Implementation teams can make empathic products designed for the actual end users
  • There’s very little to lose in trying it—the templates to make a canvas already exist, and circulating a completed canvas won’t take weeks of time

What are the risks of not using an empathy map, or not focusing on users first? You can recognize businesses that do this by these traits:

  • The business measures impact of a product by how many features are delivered and not how many customers adopt and actually use
  • Product backlogs are prioritized based on internal input and not on users’ wants or needs
  • Marketing strategies follow traditional practices or must run multiple uniformed experiments to find channels that are most effective
  • Implementation teams make design and build decisions based on their personal preferences
  • Sales numbers run flat and user adoption rates are low

Okay, so I can’t promise an empathy map will result in an immediate spike in the number of active users or get you from zero to $1 million in sales.

But I have seen enough businesses flail and blindly make strategic decisions when they could be capitalizing on and delivering value to customers.

Being empathic, I can’t help but put an empathy map canvas in front of them—and you—and say, “Here. Let’s fix that.”



Source: https://www.invisionapp.com/blog/empathy-maps-ux/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=55277570&_hsenc=p2ANqtz--8GN3ipM3h0-f0poPODxd4FCmes83p74mjCxigu6oswmwgRlhT27gHv_uX6w5QVlUxalr57_v2MJ4PBhdbvyoRbv1tVg&_hsmi=55277572

 

Float label pattern in UX form design by Gavin Lau

The very first time an input pattern had a float label pattern was in August 2013. The idea was simple enough — animate placeholder text to show an icon beside the input so the user does not lose context.

The beginning of the floating label idea — Icon beside the input

The beginning of the floating label idea — Icon beside the input

The idea was tweaked a little with time. Icons did not totally serve the purpose. It was frustrating to not know if something is right or not because there’s no label. That’s when the icon idea was scrapped and the text onlydesign was born. Now the float label came into picture with a slight animation for the text. When someone typed into the input box, the float label would animate upwards and change colour to the active state.

Version 2 : Float label pattern with text (Image credits :  Derek Torsani )

Version 2 : Float label pattern with text (Image credits : Derek Torsani)

Float label came up as a solution that saved space, looked clean and clear, and did not forego usability.


Top aligned labels vs Floating label pattern

1. More elements to scan in top aligned labels

In the top aligned form above, there are only 4 fields. But when you scan the form, it feels like there’s more to fill out. This is because there are 8 distinct elements that users have to scan.

The labels and fields are individual elements separated by whitespace. As a result, users process these elements with 8 separate visual fixations. The extra visual fixations give users more scanning to do, and makes them feel like there’s a lot to fill out.


2. Final checking of inputs before submitting

With top aligned labels, cross checking inputs towards the end isn’t quick to do. Users have to sweep their eyes up and down from label to input to see if they match up. The whitespace row and field border gets in the way of their visual path and slows their flow down.

The other pattern, where the labels disappears after the input field is filled, is also problematic. Disappearing labels force users to use memory to recall what the labels were.

With respect to user’s ease in cross checking the inputs before submitting form

With respect to user’s ease in cross checking the inputs before submitting form

With the third pattern (float label pattern) checking user input is quick and easy. The labels don’t disappear, and there are no visual barriers like on top aligned forms. Instead, one visual fixation per field is all it takes to compare label and input.

The text styling also helps users check their input quicker. By making the input text bold and larger, and the label text smaller, users can distinguish them at a glance.


3. Field focus

Field focus is all the more important for mobile interfaces. That’s because users look at the keypad while typing. Only after they are done typing, they look back to check what they have typed and whether it is in the right position.

Comparison of all three patterns of labels in the input field

Comparison of all three patterns of labels in the input field

Here’s what usually happens with the 3 patterns -

  1. In pattern one (top aligned label), the field highlights, but not the text label.
  2. In pattern two (label disappears when user types), the field highlights, but the text label can disappear or turn faint.
  3. In pattern three (floating labels), the border surrounds the field, label and input highlight altogether.

It’s clear that the third pattern (floating labels) are the strongest — Because, users get a clear view on what field they’re on, and what they’re typing at all times.


4. Error messages while submitting

If the form has been filled out, but there are no labels visible outside the form fields or on the top, then users have to go back to each field to reveal the description in order to fix the error.

 

[IMP] : Test your form interfaces

Honestly, how much ever we talk about the best practices, fads and trends in the difficult of UX, you can never be sure how your users might respond to an interface. The response might vary based on a lot of parameters — you users’ exposure to UI trends, the kind of apps they use, the age group they belong to and so much more… It’s best to design versions of form and test them with your users to know which works best for your brand.

We use CanvasFlip to check heatmaps and user videos on forms. I believe you would benefit from the same. An A/B testing of the same would be quite helpful in taking any decision.

Test forms before coming to any conclusion.

Test forms before coming to any conclusion.

 

Conclusion

Users can be quite hesitant to fill out forms, so we as designers should make this process as easy as possible. Minor changes — in the way labels are presented — can significantly increase form usability. Usability testing is simply indispensable in form design. Very often, carrying out just a few tests or simply asking a colleague to go through a prototype of the form can give you a good insights in how usable the form is.


 

YOU WILL NEVER GET UX RIGHT by Gavin Lau

The inventor of the typewriter, Christopher Latham Sholes, didn’t think the QWERTY keyboard was the most efficient way of typing. Even after the typewriter became a success, he continued to experiment with and patent new arrangements he considered to be better.

Yet, I’m still typing this article on a QWERTY keyboard. If better versions have been developed, why don’t we type on a better UX keyboard?

Here’s the truth: mastering the user experience of any product is impossible.

We could easily agree that nothing is perfect and move on, but that view is only a surface-level understanding of the problem. What’s really going on are 2 competing needs, standardization and innovation, fighting against masterful UX. 

While perfect can’t be done, understanding how these 2 forces take away from the user’s experience can help you improve the effectiveness of your UX strategy.




Standardization slows down (or stops!) innovation

Let’s go back to the keyboard example. You may be wondering why we don’t use better layouts than QWERTY. 

While there’s a bit of speculation regarding why the QWERTY keyboard was arranged the way it is, once it went to production, typists became familiar with the layout and were reluctant to switch. The QWERTY arrangement was the first to hit the market and was later accepted as the official standard, regardless of its level of efficiency.

Despite Sholes’s lifetime of improvements, QWERTY stuck. It didn’t matter that other versions allowed for faster typing―typists were already comfortable on the standardized keyboard.

“Standardization slows innovation.”

Standardizing the keyboard was good for typists who could then work on any typewriter. And it was also good for manufacturing that didn’t have to deviate from model to model.

But standardization also prevented innovators from improving the way we type with new letter arrangements. 

The many attempts to rearrange the letters on the keyboard haven’t been successful. QWERTY works well enough and remains the standard. Standards benefit UX, but they also prevent, or at best slow down, improvements.

So what happens when there are no standards? 

Innovation.




But innovation ruins the ease of standardization

The internet is the Wild West of UX standards. Every website, platform, mobile app, and the like is a new space to reinvent what makes UX good. Not only are the functions different, but the way we achieve similar tasks varies from competitor to competitor.

Consider project management software: Trello and Asana aim to reach the same end, but they’re completely different.

You could argue that the shopping cart is a universal standard around the web, so there’s one. But what about save? The crucial save function can be represented by the floppy disk icon or a check mark, or it could even be omitted because auto-save took its place. 

Image from Inside Design:  Trello .

Image from Inside Design: Trello.

 

There are a couple of obvious positives that come from this. The competition of having the best UX drives companies to innovate more and create better products. And the user has more options to choose which product gives them their personal best user experience. But the negative aspect of widespread and rapid innovation is that the user has to be the one to adapt when the UX design changes from product to product. It doesn’t matter how well you’ve designed the UX—when your users have to face a learning curve to use the product, it’s not 100%. 

With standardization, you won’t be able to reach any higher. With innovation, users have a higher burden. 

Now what?

Where to balance standardization and innovation

The best we can do is balance how much we adhere to standards with how much we push for innovation.

You, the UX expert, should consider the business perspective of innovation. Where is innovation critical to your business, and where is it not?

“Balance how much you adhere to standards with how much you push for innovation.”

For example, if your business is similar to others (like an email provider), then your competitive edge is the UX. This is the place to innovate since it’s a “make or break” deal. If you don’t innovate there, you don’t have much else to offer. 

On the other hand, if your business is innovative in other ways—new service, new platform, etc.—you want people to easily adapt to it by designing the UX to fit standards your customers are already familiar with. This way, users may be challenged by the new service concept, but not challenged adopting it. 



Your UX will not be perfect, but it can be GREAT

The other area you can find a balance of standardization and innovation is in considering the wider scope of the user’s experience. Customers do not live in brand bubbles. They float between product to product, and they interact with your product in different contexts. 

Using the following 5 GREAT tips, you can take into account a wider scope of the user’s actual UX. 



Give trends time to prove their worth

Trends are temporary. When you jump from trend to trend, you are leaning towards the extreme of innovation without necessarily good justification. 

You can balance this by giving trends time to prove their worth before you implement them in your product. 



Remember fundamental UX principles

Keep it simple, easy to learn, easy to use, intuitive, and consistent. But with this many rules, we are leaning towards standardization. 

There is nothing wrong with keeping these fundamentals. However, truly innovative ideas are sure to push the boundaries. The balance is in retaining fundamentals when possible.



Emphasize onboarding and guidance

Innovative products create a learning curve either from their newness or sophistication (read: complexity). When users approach an innovative product, they will likely face a learning curve to understand it. It’s your job to make sure they have a proper “education.” We call this onboarding. 

Related: 5 key lessons for successful user onboarding

It’s not enough to have a good product—you also need to have good onboarding to have great UX. And once initial onboarding has been completed, continue this effort with onscreen guidance. 

Don’t ignore onboarding.

Don’t ignore onboarding.




Apply insights from advanced analytics

Today, analytics can show us every nook and cranny of the user experience. The challenge is to have the right kind of analytics—and then actually make use of it.

There are several levels of analytics available, with some being more helpful than others. You can easily get information about views and clicks, but these stats aren’t as helpful as data that can show you how the user interacted with the standards and innovations of your product. Seek out information on where users hesitate, when they complete a task fast, and other granular details about the user experience.



Test usability with real users

It’s hard to match the value of real user feedback. Usability testing is the best way to get well rounded information on why and how your users interact with your product. Go to your customers or bring them into your office—this in-person feedback is valuable for the nuanced indicators you’ll be able to observe. You’ll also be able to ask follow-up questions. 

When you make decisions regarding your UX, keep in mind our example of the QWERTY keyboard. With each innovative product you design, ask yourself: is this innovation worthy of becoming the standard for generations to come? If not, consider using a more familiar interface.

Before capitalizing on a UX standard, think about whether the feature be improved upon in a way that will be meaningful to your users.

While no UX will ever be perfect, there’s always room to improve. These guidelines should help you find the sweet spot between implementing standards and pushing innovation.

 

Source: https://www.invisionapp.com/blog/user-experience-innovation/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=55113384&_hsenc=p2ANqtz-_c3DG6VKHdOgu7fjgQSJHUEgeQ-rIWHiIXSE-WoN2xLInMLWFs23qSnUQMrXNe17Zoawh6R8ndq9bg2lG9G4Kg-OLVlw&_hsmi=55124952

Enhance Your Creative Thinking by Gavin Lau

How to maximize creativity with just 3 daily habits.


The human mind thrives on creativity. When you have a higher opennessto cognitive flexibility and the ability to entertain novel ideas, you have a natural capacity to overcome stress—a symptom of anxiety that if sustained can have consequences on your mental health. In other words, the traits of creativity have the potential to give you a healthier, more fulfilling life.

Without openness, you are more likely to become drained, less inspired, and less motivated.

Creativity isn’t exclusive to people who appear to focus on it for a living—it’s for everyone, because we all participate at varying levels, even if only mentally. The following daily routines are by no means the only means to improve your mental health, but they can certainly cultivate the right conditions to allow your creativity to thrive.



1. Switch off and get into a state of “being”

This may sound like a fruitless or unproductive exercise but it is absolutely essential—not just for your mental health, but in harnessing the best conditions to be creative. Throughout the day, you have to give your mind a break and let your subconscious bear some of the weight.

Switching off doesn’t necessarily mean going to sleep—most of us don’t have the luxury of doing that in the middle of the day. It means being relatively inactive in thought; requiring minimal willpower and concentration. This includes not looking at screens or devices, because checking feeds and notifications require a certain level of thought processing power that can drain your mental batteries pretty quick.

Imagine your brain as an engine that needs to be refueled periodically. You cannot run on fumes indefinitely without consequences—you need to spend some moments in calm and away from the busyness of your thoughts. Taking micro breaks can help you overcome stress and clear your head, but can also manifest stronger creativity levels.

The trick is not to think of micro breaks as wasted time, but as a way to recharge your batteries.

When you’re in a state of “being”, you become more conscious of your surroundings. You’re half-focused on the current experience as appose to letting your inner thoughts dominate fully. You give your subconscious intuition the best conditions to work in because there’s room for it to breathe. Getting into this state is fairly simple and really depends on what works best for you—you might be meditating, listening to music, or participating in leisurely exercise such as walking, jogging or cycling. Essentially, something that provides just enough distraction without overbearing concentration or stimulation.

For me personally, I’ve found that being in the shower, driving, walking, or even praying have been the most effective ways of “being”; there have been so many eureka moments where I’ve let my thoughts partially wander.

‘Creative potentials are usually blocked by the busyness of our minds and our lives. In order for them to emerge, both our lives and our minds have to become relatively empty and quiet.’ — Steve Taylor PhD, Psychology Today

When you’re at work, some experts on productivity believe it’s better to take micro breaks in the morning as appose to the afternoon—in other words, don’t leave the break until you’re tired, because you’re more likely to end up requiring a much longer one to obtain any noticeable benefit. With breaks in the morning, you’re less likely to feel fatigue at the end of the day and you can be more productive as a result.



2. Exercise for 15 minutes

What you might not know about exercise is that while it can obviously improve your physical health, it also has a positive effect on your mental health too—in more ways than one. Studies such as one by BJOSM have demonstrated that exercise can enhance creativity, and that a decent workout can even boost your creativity for up to two hours afterwards.

Similar research was carried out by Stanford University, revealing that simply walking has significant benefits to creative thinking; even sustaining for a little while after the walk. Walking either indoors on a treadmill, or outdoors in the fresh air both appear to produce twice as many creative responses compared to a person sitting down.

The benefits of exercise don’t just stop at boosting creativity. It increases levels of a brain protein known as BDNF, which is reportedly able to enhance cognitive performance; decision-making and learning ability. It can also reduce stress.

Physical activities can help the brain cope better with anxiety—without exercise, your body will struggle to efficiently deal with it.

‘Workout of the body’s communication system may be the true value of exercise; the more sedentary we get, the less efficient our bodies in responding to stress.’ — American Psychological Association

Another side effect of a regular workout is better sleep. As little as 15-20 minutes per day of physical activity can dramatically improve the quality of one’s nighttime sleep—65 percent more in fact. With better rest you’re simply much more productive, and able to focus better during the day.

When combined, exercise and healthy eating also have a positive impact. A diet that is rich in fruits and vegetables with a regular intake of complex carbohydrates, essential fatty acids and antioxidants supposedly encourages higher levels of well-being and creativity.



3. Be curious and pay attention

When you depend on your mind for true creativity and innovation, you cannot be on autopilot and systemize everything, or be too methodical about your daily process and how you find inspiration—your mind becomes accustomed to familiar paths, and this will lead to the same results over and over again. It’s okay to be disciplined, but you also need to be open to breaking away, spontaneity and receptiveness to the world around you—even if it’s outside of your industry or comfort zone.

‘There is no other avenue to cultivating creative work aside from impassioned curiosity.’ — Faisal Hoque, Fast Company

It becomes important then, regardless of the creative medium you work in, for your mind to learn how to be more curious if it isn’t already. Curiosity is the secret sauce to an interesting and creative outcome. It’s probably even more important than some of your passions.

The more regularly you practice curiosity, the stronger and more attuned your creative mind is.

The good news is; curiosity is available to you at all times. It’s accessible from anywhere. Whether that’s through observation, exploration, or asking questions, you need to have a child-like stubbornness to be able to tap into your curiosity every single day.

You have to be vigilant, and you have to be paying attention. You have to be optimistic that you’ll find something interesting or learn something new. You have to be fearless. You have to be persistent in going down new paths. Always take pictures, videos or notes of the things that inspire you. Discover it, record it, and your curious mind will thank you for it.



Final word

Once you accept and acknowledge your commitment to maintaining a healthier creative mind, consistency with these habits can go a long way to keep the momentum going. The benefits you’ll get from switching off, exercising and being curious on a regular basis will have a massive impact on your health, and your career.

 

 

9 Ways to Lift Employee Engagement on Your UX Research Team by Gavin Lau

User researchers are a curious bunch. They tend to embrace ambiguity and enjoy the learning process. During their quest for knowledge they try to build both credibility and expertise in their assigned domains. There are times however, like any job, where things can get monotonous. Doing research on the same types of users or in the same domain space day after day, month after month, can make a user researcher crave for something different. They may feel unchallenged, even bored, and a desire for using their expertise in some other area vastly different from their current one.

User research is a cognitively demanding task that over time allows them to become bearers of tacit knowledge. This is the knowledge that is difficult to articulate through writing or drawing, and can be a competitive advantage for a company since it is so difficult to copy. When user researchers are studying a domain deeply enough they begin to learn the language, culture and context better than others due to the immersive nature of their work. When this tacit knowledge leaves the building, it is extremely hard to build that knowledge back up again in the next person who comes along.

Since user researchers may feel unchallenged on their jobs after long stints and are also bearers of valuable tacit knowledge that is of tremendous value to an organization, how can managers ensure that their researchers are always being challenged and engaged in ways that ensures they stay put? No manager who has the right team in place wants to have to start from scratch and retrain a brand new researcher if they can find the right lever to pull for keeping their existing team members engaged.

As a senior user researcher on a small team I have seen what works and doesn’t work for keeping fellow researchers from job mutiny. While I am not a manager myself, I have a unique vantage point as a user researcher. I have interviewed dozens of human resource professionals who specialize in areas like employee relations, onboarding and terminations. These people spend parts of their day (waking or, sleeping, in some cases) thinking about how they can keep their employees engaged so that they don’t leave for the competitor down the street.

This article focuses on the key strategies a manager can use to lift the engagement on their user research teams. They have been considered with the user researcher profile in mind; curious-minded, lifelong learners who are unafraid to take on new challenges and embrace ambiguity in all of its gray beauty.

The tips have been divided up into those that may produce slight upticks in engagement and those that may produce more sustainable surges. Some people need more incentives than others when it comes to staying with their current gig. Using combinations of both might be the right formula for keeping them engaged.



Tips that may produce “upticks”

Here are the “upticks” which hopefully add reasons for user researchers to stick around a bit longer, even if it is for a little bit:

Tip#1: Allow them to work from home. Sometimes all you need is some fresh air or a change of scenery. Allow them to work from home every now and then. Give a little so they can take a little. It fosters trust and demonstrates the value you see in them as researchers. My team might work from home if they are doing remote sessions and are unable to book conference rooms in my company’s office. I might work from home if I am analyzing large datasets and need to concentrate. As long as it is not misused, working from home can be a good change of pace and one more reason for a researcher to want to stay put at their current gig.

Tip#2: Find something to celebrate! Invite the team out to lunch or drinks after work for doing a job well done. It gives the team time to decompress from long intense days of analysis or research sessions and to share their own war stories. Finding a reason for everyone to get together gives them a greater sense of purpose. Recently my manager set up a congratulatory lunch for me after graduating from my HCI graduate program. Team members that I’ve worked with came out and celebrated, enjoying some great food freeing themselves from the daily monotony. Celebrating the achievements of team members can go beyond academic ones. Maybe it is as simple as a new employee’s 100th day of employment. These mini celebrations demonstrate that the employee is not just another warm body but someone special and valued.



Tips that may produce sustainable surges

Below are some more sustainable strategies from preventing user researchers from leaving. Many of these tap into the intrinsic motivations of user researchers. These are the things that make them feel intellectually challenged and satisfied with their jobs.

“One cannot enjoy doing the same thing at the same level for long.”
-Mihaly Csikszentmihalyi

Tip#3: Give them “flow-producing” work. Mihaly Csikszentmihalyi, psychologist and author of Flow: The Psychology of Optimal Experience, describes a concept called flow. This is a state of being where an employee’s skill set is appropriately matched to the level of difficulty of their work. Giving employees those challenging and new research assignments is a great way to keep employees engaged in what they are doing and preventing them from jumping ship. Several years ago while working as a user researcher for a previous employer, I was losing that sense of flow in my work supporting a scrum team that was not actively engaged in or using the rich insights gleaned from my research studies. Initially I was highly motivated and enjoyed the challenge my work presented, but because stakeholder engagement was so low, the challenge of impacting stakeholders to use the insights was insurmountable. As a result, my intrinsic motivation gradually deflated over time. My manager realized that he needed to present me with a new challenge — one that would produce and maintain flow. He knew he needed to reallocate me to a team that embraced user research or else he would risk losing me. He assigned me to an area that I could delve into with a fresh set of eyes and appropriately challenge me to use new research methods. The reassignment re-fueled my spirits and passion for the job. Flow was once again achieved! For managers whose user researcher team members have felt that sudden loss of flow in their work, consider giving them greater challenges in new areas to make them more engaged and also where their work is more appreciated and valued.

Tip#4: Mix it up! Variety is the spice of life. A research participant in one of my past research studies of human resource professionals once said this when asked about why he loves his job as a benefits administrator. Oftentimes people need a change of pace in order to get motivated. Giving researchers a chance to work within another domain or with a different set of users will give them more exposure to unexplored areas and nurture their natural curiosity for learning. One of my former research colleagues was getting a bit tired of working on business-to-business products and really wanted a chance to work on a business-to-consumer product. With a little bit of luck (the timing was right!) and her great track record for delivering solid insights she was given an opportunity to work in the B2C space. The new role gave her a renewed confidence and motivation to stick around at her current employer.

Tip#5: Collaborate. Doing research can get lonely. Pair up with a research colleague on a project. The beauty of the field of user research is the diversity of minds and backgrounds that enter this profession. No one researcher is bound to do and see the same things as the other one. Working with other researchers allows you to learn something you didn’t know before. Pick up on better and different ways of collecting data, taking notes or moderating sessions. You might be exposed to a new method which you can add to your research toolbox for future studies. Collaborating with fellow research colleagues also helps you to get to know others on the team while simultaneously building camaraderie among team members. You begin to form an informal network of expertise that you can tap into in the future. My team forms committees of 2–3 researchers in order to make research process improvements. My colleague and I recently teamed up to start developing consistent research interview guides containing standard protocols that have worked well in past studies so that others on the team could get going more quickly with their research efforts. It will prove especially helpful for new hires on the team who need a good starting point. The committees not only allow us to share ideas and perspectives, but it motivates us to shape the culture within our organization.

Tip#6: All other things being equal, pay them more $$ if they’re worth it. Money talks (sometimes). According to SHRM (Society for Human Resource Management), increased pay is a modest predictor of an employee’s decision to leave an organization. Pay by itself may not necessarily be enough to keep them. A 2010 study conducted by Tim Judge and colleagues suggests that the association between salary and job satisfaction is very weak. The 120 years worth of research across 92 quantitative studies suggests that there are other factors to consider when thinking about trying to retain your best employees. In fact, past research suggests that increased pay might demotivate employees, especially those (like user researchers) who are largely intrinsically motivated. Research from Edward Deci and colleagues suggests that when extrinsic rewards were made visible to participants their intrinsic motivation to do interesting tasks decreased by 36%.

If research suggests that pay is ineffective in retaining good employees why on earth would I recommend this as a tip for lifting engagement? If all other things being equal — the researcher feels adequately challenged and highly motivated by the nature of the work, has a flexible schedule and great work/life balance and benefits, giving them more money is hopefully the last item to tip them in favor of staying. The pay increase (or other extra financial incentives) should be well justified by better than average job performance.

If the disengaged team member asks for a raise, and they are high-performers, then see if it is feasible to give them more than the average annual increase. If increasing their salary is simply not feasible, see if there are less liquid financial incentives available. Maybe restricted stock or options is a lever that can be pulled. To get them fully committed to the future of the company employers usually tie their tenure at the company to these extra financial rewards. Ultimately the decision about whether or not the individual is worth the extra money that they are asking for must be weighed against the cost of having to retrain someone else and build up that body of tacit knowledge that is ready to walk out the door.
 
Tip#7: Give them more pay BUT with more responsibility. In a 2012 Harvard Business Review article entitled “Five Ways to Retain Employees Forever,” the “5 R’s” are mentioned as a means to keep your employees from leaving and staying with your company for sustained periods of time. One of the R’s is responsibility. Giving your employees more responsibility over time demonstrates the trust you have in them, allowing them to grow and providing them more pay at appropriate times. As mentioned earlier, Edward Deci’s research suggests that simply giving them more money may deflate their motivation potentially making the researcher want to leave. Tethering the incentive to greater responsibility might reduce the possibility of demotivating the employee since there is more “wiggle room” for the employee’s professional growth and development. For many intrinsically motivated researchers out there this may be an appealing prospect to further challenge themselves with new duties added to their job. The researcher will hopefully see a good match between the intrinsic challenges of their increased responsibility as well as the amount they are getting paid to do it. By giving them increased responsibility and more pay, you are investing in them and their commitment to the company.

Tip#8: No matter how big or small, give credit where credit is due.Sometimes employees simply want to be given the recognition they deserve. During team meetings I make it a point to call out fellow researchers who were truly helpful on a project in which I was working on with them. This behavior ends up being a model for others on the team to follow and acts to shape the culture of your research team. Whether the contribution was as small as sending me a link to a past research study that can serve to inform an existing project that I am working on, or if it is a larger contribution in the form of a 50–50 collaborative effort with another researcher, NEVER miss a beat to give a “shout-out” to a colleague for their assistance on a project. A little credit goes a LONG way.

No matter how big or small the effort, ensure team members are getting recognized for their hard work. My organization has a points program called MyMoment which allows employees to recognize other employees for something (no matter how big or small) that they may have done to help a fellow colleague. As employees get recognized through these awards they accumulate points that they can redeem for gift cards at retailers or restaurants. Talk to your HR department about implementing such a program.

Tip#9: Pay more attention to them. One obvious but perhaps easily overlooked thing you could do to improve engagement with your researchers is simply listen to them. Listening demonstrates respect for your team members. When someone is truly listening to you, they not only hear you but they are fully processing what you are saying. Give your researchers a chance to formulate their ideas and opinions by actively listening to their points of view. My team has bi-weekly one-on-one meetings with our manager. It gives us an opportunity to informally chat about things, give feedback on projects or talk about new ideas. Sometimes just having a sounding board like an attentive manager or colleague is all you need to feel engaged!



Conclusion

Which combination of tips to use for improving engagement on your research teams ultimately depends on whatever works best within your organization’s culture. Listening to your teams’ needs is probably the best advice that is implied by most (if not all) of these tips. This key theme reminds me of a story I recently read to my five year old. The title escapes me but the story resonated with me. It’s about a bus that is unable to move because there is a dog in the middle of the street blocking the bus. No matter what the people on the bus do they are unable to move the dog out of the way until finally a little boy on the bus realizes that the dog is hungry and wanted some food. After giving the dog a bone it finally moved out of the way and the bus was on its merry way. The boy was seen as the hero in the story. He was the only one that was able to get the dog to move. Only after stopping to listen to the dogs’ needs was the bus able to get going again. The lesson: Be a hero. Stop to listen to your researchers’ needs. Seeing things on their level will build both empathy (something that really great researchers tend to excel in) and a way forward to work together.

 

 

Typography in UI: Guide for Beginners by Gavin Lau

People read all the time. It’s not only books or magazines but various info on the Internet, adverts in the streets, in public transport or outside shops. However, only minority of readers may know how much time and effort often stand behind a single line. When we easily read a copy feeling comfortable and relaxed, many thanks go to a designer. Text arrangement and the aesthetic look of fonts are among designers’ top priorities. To create effective UI and clear UX designers learn basics of typography science. Today’s article covers basic points in typography which every professional designer should comprehend and apply in work.



What’s typography?

Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.

Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11–12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as Textualis (Textura) and Schwabacher.

Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now the science is applied in different spheres and plays a significant role in design.

 

The role of typography in design

Can you think of at least one example of web or mobile design without copy elements? It’s difficult, right? Still, just a presence of copy in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it’s too difficult to understand so it isn’t worth spending much time. However, typography is an essential part of the effective design. Let’s see why.

People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users perception.

The effective copy is a key to the powerful design. Its effectiveness depends on not only its content but also presentation. Font size, width, color, and text structure — all of that matter. Designers can transfer certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps design to communicate with people. Visual performance and readability of copy in digital products have the great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can’t use it at all. Today poor user experience in digital products is unforgiven since users can easily find the better alternative.

In addition, bad typography significantly affects the first impression because even when users don’t read copy, they scan it. In case fonts look inappropriate people may not want to learn about your offer or use your product.

 

Essential typography elements

To create profound typography, you need to learn its anatomy and the processes typography building requires. Let’s see.



Font and Typeface

Nowadays, many designers use terms “font” and “typeface” as the synonyms but that’s not quite right. Let’s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers.



ean line and baseline

Typically, type characters are placed in a straight line creating a neat visual presentation. Main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.

 

Character measurement (size, weight, and height)

To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called “x-height” because the body of every character in one size is based on the letter “x”. This approach makes them look even. It’s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.

 

Ascender and Descender

The ascender is a part of a letter that goes above the mean line like in a letter “b” or “d”. The descender is opposite to ascender. It’s a segment that extends below the baseline like in “q” or “g”.

 

White space

White space, also known as negative space, is the area between elements in a design composition. Readers aren’t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, copy will be hard to read. That’s why negative space matters as much as any other typography element.

 

Alignment

Creating effective typography is not that easy and it includes many processes. For example, alignment is an action of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.

 

Tracking

The process of tracking involves adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.

 

Kerning

Kerning is a bit similar to tracking still they aren’t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.

 

Leading

Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.

 

Typographic hierarchy

As any other design element, typography should be structured. Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of typefaces and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating typography elements including typefaces, fonts, sizes, and colors as well as their alignment.

 

Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.

The primary level of copy content includes the biggest type like in headlines. It strives at drawing user’s attention to the product. The secondary level consists of copy elements which can be easily scanned. Those are subheaders and captions which allow users quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough.The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

Typography cannot be learned in one day. It requires constant studying and persistence. Follow our updates to get more about typography in design.



 

4 Key Financial Metrics That All Startups Should Measure by Gavin Lau

More than 90% of all startups ultimately fail.

At the end of the day, startups die because they are not built upon healthy business models that can be sustained over the long term.

Economic growth is essential to startup success: companies that do not scale do not survive.

How, though, can you ensure that your business model is sound, that it will allow your startup to expand over time? This is where measurement comes into play.

In this article I’ll discuss 4 key financial metrics of which all startup founders should keep close track.



1. Fixed vs. Variable Costs

One of the most important pieces of financial data you as a startup founder have to amass (and continuously update over time) is the total cost of running your business.

Your total cost consists of the aggregate amounts of your fixed costs and your variable costs.


Fixed costs:

  • Costs that do not vary with a company’s volume of production, i.e., costs that remain steady regardless of the amount of goods or services that a company produces;
  • Examples can include rent, loan repayments, insurance, and office supplies.


Variable costs:

  • Costs that do vary with a company’s volume of production, i.e., costs that change in accordance with how much of a good or service a company produces;
  • These costs increase (i.e., become more expensive) as production goes up and decrease as production goes down.
  • Examples can include direct material costs, direct labour costs, sales commissions, and server costs (sources: 12).

Understanding your total cost is crucial for various reasons, including the fact that the amount of money your business spends impacts whether, and if so then when, you can turn a profit (and how much that profit will be).

Outgoing money (i.e., costs) also heavily influences the length of your startup runway, i.e., the amount of time for which your company can survive without bringing in stabilizing revenue.

You can calculate your runway by taking your cash balance, i.e., the amount of money that your startup has to fund burn, and dividing it by your burn rate, i.e., the monthly rate at which your business is losing money.


For instance:

  • Runway = cash balance of $125,000 / burn rate of $25,000 per month
  • Runway = 5 months (until you run out of money) (sources: 12).

In addition to the fact that burn rate explicitly reminds you that your startup will indeed run out of money at some point in the future if you don’t eventually start bringing in sufficient revenue, it’s also a crucial metric to measure in terms of attracting investments. As Rosemary Peavler explains:

“Investors look at a start-up company’s burn rate and measure it against future revenues of the company to decide if the company is a worthwhile investment. If the burn rate is greater than forecast or if the company’s revenues are not growing as rapidly as they are forecast to grow, then investors may think the company is not a good investment. It may be too risky and so they may not invest their money.”

How can you effectively extend the burn rate of your venture? Here are 3 tactics:

  1. Operate as lean as possible by keeping your costs as reasonably low as you can: maintaining a low burn rate will maximize your financial options, thus allowing you to abort, adjust or restart one or more processes before reaching the end of your runway.
  2. Try to make your fixed costs more efficient: e.g., utilize new technologies — such as Google Docs, Quora, Skype, and Slack — to communicate with your customers and co-workers/partners, to collect data, and/or to conduct research more cheaply as compared to more traditional forms of market research, advertising, and communication.
  3. Increase your revenues: one method for doing this is to ensure that you’re maximizing the monetization of your startup.

(As an aside: if you’re looking for a comprehensive guide to some of the best startup tools available then I suggest checking out Steve Blank’s resources here and Ali Mese’s master list here).




2. Breakeven Analysis

The U.S. Small Business Association provides a succinct and helpful description of “breakeven analysis”, stating:

“Breakeven analysis is used to determine when your business will be able to cover all its expenses and begin to make a profit. It is important to identify your startup costs in order to determine your sales revenue needed to pay ongoing business expenses.”

Your company’s “breakeven point” is the point at which your revenues (i.e., the amount of money you’re bringing in from sales) exactly match your expenses (i.e., the amounts of your fixed and variable costs).

The point beyond your breakeven point is where you begin to accumulate profits, i.e., financial gains that exceed expenses, costs, and taxes.

There are many advantages to calculating your breakeven point. By understanding where your break-even point is, you are able to work out:

  • How profitable your present product line is
  • How far sales can decline before you start to incur losses
  • How many units you need to sell before you make a profit
  • How reducing price or volume of sales will impact on your profits
  • How much of an increase in price or volume of sales you will need to make up for an increase in fixed costs

Here’s an example of what a completed breakeven analysis can look like:

Mathematically, the breakeven point is calculated like this:

Breakeven point = fixed costs / (unit selling price — variable costs)

The Queensland Government offers an interactive webpage on which business owners can calculate their breakeven points.

After completing your breakeven analysis, it’s important that you prudently consider the following key questions:

  1. Is this a realistic sales target?
  2. When do you anticipate being able to hit that target?
  3. Which resources will you need to get there?
  4. How much cash will you burn through in the meantime?

Answering these questions is crucial to gaining insight into a) how much money will you have to raise and b) the length of time for which will you need to invest such funds before breaking even.




3. CAC & LTV

Serial-Entrepreneur Steve Blank defines a startup as “an organization formed to search for a repeatable and scalable business model.”

As I’ve recently pointed out:

“The creation of a repeatable and scalable business model is the point in the start-up lifecycle where a new venture finds ways to consistently acquire new customers for less money than the revenue they are expected to bring in, thereby generating profit.”

Creating a repeatable and scalable business model is fundamental to a startup’s vitality because it makes it possible for a startup to achieve its most important objective, i.e., grow and scale.

Why is this the case?

Because companies that successfully implement repeatable and scalable business models then begin securing true sales and marketing efficiency.

This efficiency is measured in accordance with two key metrics:

  1. Customer Acquisition Cost (CAC): The total cost of convincing a potential customer to buy a product or service. Calculated by dividing the costs spent acquiring new customers (marketing, advertising, etc.) by the number of new customers acquired during the period in which the funds were spent. Example: if you spend $5,000 a month on promotion and you acquire 20 customers then your CAC is $250.
  2. Lifetime Value of Customer (LTV): The projected revenue that a customer is expected to generate during his/her lifetime. In the simplest of cases, calculated by multiplying the yearly cost of your service by the number of years for which a person is expected to remain a customer of your company. Example: if your service costs $100 per year and your average customer stays 5 years then your LTV is $500.

LTV can be difficult to estimate accurately during the earliest months or years of your startup when you lack concrete data. If that happens, consider looking to similar companies in your industry for an idea of what you LTV might be.

Why is it so important for startup founders to understand these two metrics and calculate them for their specific businesses?

Because getting these numbers wrong can be absolutely deadly to a new startup.

The 2012 Startup Genome report, which analyzed 650 Internet startups, revealed that “premature scaling is the most common reason for startups to perform poorly as they tend to lose the battle early on by getting ahead of themselves.”

In essence, premature scaling is an attempt to massively expand and grow your new company before you have successfully hammered out the intricate details of a repeatable and scalable business model.

In other words, failing to nail down the specifics of your CAC and LTV can facilitate premature scaling and, thus, startup failure.

The general consensus amongst many venture capitalists and entrepreneurs seems to be that profitable business models are those in which LTVs are at least 3x higher than CACs:

Furthermore, in order to grow sustainably your startup should pursue the ambitious goal of recovering the expense of your CAC within one year of spending the cash.

This may seem like a simple task but it’s actually very difficult to achieve in the 21st century, especially given that the Internet is now completely saturated with advertisement, products/services, and tech startups.




4. Cash Flow Forecast

The fourth key metric that all new companies must measure is “cash flow”, i.e., a comparison of the amount of money coming into your business versus the amount going out.

Positive cash flow refers to a situation in which your business takes in more funds than it spends whereas negative cash flow refers to the opposite, i.e., when the amount of money coming into your business falls short of the amount going out.

Cash flow is the blood of every startup organization: no cash flow = no business operations — period.

In a recent article, I provided a detailed explanation of the need for startups to understand and consistently track their cash flow numbers, noting that all prudent entrepreneurs should regularly practice cash flow forecasting(otherwise known as cash flow projection).

Cash flow forecasting is a projection technique used to determine the ‘financial health’ of your business.

The U.S. Small Business Administration explains exactly why forecasting is so important:

“Forecasting gives you a clear look at when money comes in, when it goes out and what money you are left with at the end of each month after you have paid your expenses and recorded your income. Knowing your numbers in terms of cash flow projection allows you to see potential pitfalls within the cash-in and cash-out flow of your business.”

Forecasting, thus, provides you with the key data you require to ensure that your startup doesn’t burn money faster than what you need in order to stay in business.

Many first-time entrepreneurs tend to confuse profit with cash flow.

Profit refers to income minus expenses but the problem comes with misunderstanding that “income” is not always synonymous with “cash in”.

As I previously explained this situation using the following hypothetical example:

“It’s entirely possible to have a ‘booming’ business but still be cash flow negative:
- You’ve begun selling your product;
- Your customer base is growing substantially; and
- Your long-term sales potential is massive
However:
- You’ve taken on lots of debt in order to reach this point (i.e., to hire your employees, develop your MVP, market your product, etc.); and
- Your monthly expenses (e.g., rent, payroll, etc.) surpass the amount of revenue you’re generating
Therefore:
- If you don’t start bringing in more money than you’re spending then you’re going to run out of cash and be forced to close shop.”

Cash flow projections can’t, of course, predict the unpredictable but they can alert you to foreseeable potential hazards.

Whilst it might be best to let a professional account carry out the quantitative analyses, it’s still important that you as a founder grasp the principles of cash flow forecasting.

The most basic form of cash flow forecasting involves using a spreadsheet that lists monthly income and monthly costs alongside annual totals for each.

For added detail, you can break the costs down into different categories, which can be quite helpful in identifying seasonal variations in expenses (e.g., your heating bill will probably go up in the winter if you rent an office).

An example of a cash flow forecast spreadsheet:

VIDEO: USE THIS FORMULA TO WRITE WINNING PROJECT PROPOSALS by Gavin Lau

There are few things more exciting than the prospect of a shiny new design project. Whether it’s a branding, illustration, web, or product design project, it’s all about how you write your proposal—what you include in it and even what you choose to leave out will dictate whether you strike out swinging or hit a home run.

The following recommendations come from over 16 years of attempting to perfect the proposal writing process—things I’ve learned from best-in-class freelancers and design agencies.

Now, before we dive in, let’s tackle 2 of the best pieces of advice I’ve received over the years:



1. Your proposal should never surprise a client

Before you send out a proposal, you’ve probably already communicated at-length with your potential client. During that interaction, you likely covered a lot of ground, including the needs of the project and a budget (or ballpark price) to complete it.  

So, when you send out a proposal, that document should sum up that conversation… and seal the deal. The proposal should not be the first time your client discovers something new about you or the project.


2. Use value-based pricing

In most cases, you’ll want to charge the highest price possible for your work. How? By reinforcing to the client that you’re not selling a commodity. You’re not selling a website, you’re not selling an app—you’re delivering value (great value!) to their business that can in turn increase their revenue and their value. You’re going to help transform their business, and that’s worth much more money than a website or specific deliverable. I mention that now, because it relates to the proposal building process, as well as how to price a project.




How to write a proposal: Length and structure

Let’s dip into the proposal itself. For this exercise, we’re aiming for a 1-page document with a simple 5-section structure. No one wants to read a 20-page proposal with a bunch of terms and conditions and long, drawn-out text. If you can say something with less words, then you probably should do that. From a design perspective, simplicity wins. 



How to write a proposal: Overview

Typically, the first section in any proposal is an overview.  The overview usually reinforces back to the client that you understand what their company and product is all about, and what they are asking you to do. 

Related: 7 difficult questions to ask your client up front

Some people start the proposal with something like “I will design a website for your business.” I don’t think this conveys the value you’re potentially bringing them. Instead, I may take a more conversation-like approach:

“I understand that your business is about this and this, and your long-term goals are to do this and that, and that’s the reason that you need a new website. This website will be important in reaching those goals.” 

This information comes from the pre-proposal conversation—you asked relevant questions in that meeting and you’re communicating them back in the proposal as the value propositions. Preferably, you can even describe how the work will help them to achieve a monetary goal:

“I’m going to help you hit $200 million in sales this year, because I will create a high-traffic, high-conversion website for you.”

When you write a proposal this way, it’s more obvious that your price is a great investment. 



How to write a proposal: Why me?

Now on to section 2, which I sometimes refer to as the “Why me?” section. In general, I’ll include this section when I write a proposal, but I always include it when working with new clients. 

Many people think, consciously or not, that they have to sell their work and the desired outcome, more than they sell have to sell themselves. Always assume the client is considering other vendors, service providers, etc. In this section, you should try to communicate what makes you the best person for the job, without coming across as being too “salesy.” Attempt to speak from an honest place about why you’re excited about that particular project or industry (if money is the only thing that excites you about it, it may be best for you to pass on the project anyway!)

“Always assume the client is considering other vendors.”

If you can find intersecting relevant experience from your past (say, the same industry or project type) be sure to mention it explicitly here. Even if you tone it down and just include a short bio description, aim to highlight points from “your story” that you think may be relevant or interesting to that client in particular.




How to write a proposal: Pricing

Okay, the elephant in the room—the third section—is pricing. For me, there have been 2 big takeaways with how I structure pricing when writing my proposals. For some reason, designers and creative pros seem to like pricing tables:

Homepage: $2,000. About Page: $500. 

I think that frames you as a commodity, and again, that’s not what I advocate doing. You should position yourself as valuableIf I do a website design, I‘ll likely give a flat rate:

Website: $20,000.

Don’t put a price on each little component of a website or design project.

This second tip I actually got from my partner Lior (historically I hadn’t done this): include 3 packages in your proposal. This gives your client options and it empowers them to have more power over that buying decision. It’s also a good way to hedge your bets and differentiate you from the competition.

Related: How to price your freelance design work

I personally believe that any project can be achieved on any budget, but the results will be different. By creating tiered packaging (1 is limited, 2 is more expansive, 3 is the premier package, etc.), you’re adding an upsell opportunity in your offering. You can now offer your client additional services they may not have even considered previously. 




How to write a proposal: What’s next?

The fourth section is essentially a call to action. You want to lead your client down the path of next desired actions: what steps do you want them to take now? I typically just write a bulleted list of things, like:

  1. Sign the proposal
  2. Transfer 50% up-front payment
  3. Project starts
  4. Etc.

This makes your client comfortable with the near-term plan while also giving them a little push to get the ball rolling. I think this section is super important.




How to write a proposal: Terms and conditions

Terms and conditions is the fifth and final section. By the sound of it, it has the potential to be the most daunting. That doesn’t have to be the case.

Some people write proposals that include a lengthy lawyer-type contract. Again, my mantra is simple is better. I think I can really cover myself well by just writing a list of no more than 10 points that essentially all lead back to how I get paid. For example, I’ll include “I must receive 50% up-front payment before I get started.” 

“A proposal should never surprise the client.”

Anything that covers intellectual property should also be included, like “I hold all intellectual property until the project has been paid for, and then intellectual property moves to you. Fonts not included.”

I don’t think that you need more than 10 of these bullet points to cover yourself well, while still keeping things simple. If you’re up against a competitor who ends up sending a 20-page terms and conditions document, this is an easy win for you. 

These are the core proposal writing fundamentals that have been working well for me over the last few years. Hopefully you can apply a few of these points in your own approach to writing design proposals and hit it out of the park.

 

Original Source: https://www.invisionapp.com/blog/how-to-write-a-proposal/?utm_campaign=Weekly%2520Digest&utm_source=hs_email&utm_medium=email&utm_content=54822873&_hsenc=p2ANqtz--8KsT7CyycJ1IJBfQKzMejgHsqO9Jyol1KI-nK7c3wbnc4FLk5C-C-0mYHRXr36a6eCrN8UMQ9bBzsNtVNmCuZrs5qpw&_hsmi=54822875