# data[].attributes.body
he Meaning of Color

# data[].attributes.attachment_link.title
Color Theory for Designers, Part 1: The Meaning of Color — Smashing Magazine

# data[].attributes.attachment_link.description
Let’s dive into color theory. We’ll discuss the meanings behind the different color families, and give some examples of how these colors are used.

# data[].attributes.attachment_link.title
Design & UX: Learn Design, UX, Photoshop, Animation & More - SitePoint

# data[].attributes.attachment_link.title
Failory: The All-In-One Newsletter for Startup Founders

# data[].attributes.attachment_link.description
90% of startups fail. Learn how not to with our weekly guides and stories. Join 40,000+ founders.

# data[].attributes.attachment_link.readable_text
Booking.com has grown from a small Dutch start-up to one of the largest travel e-commerce companies in the world.

At Booking.com, travellers are connected with the world's largest selection of incredible places to stay, including everything from apartments, vacation homes, and family-run B&Bs to 5-star luxury resorts, tree houses and even igloos.
Each day, more than 1,550,000 room nights are reserved through the platform.
Whether travelling for business or leisure, customers can instantly book their ideal accommodation quickly and easily, without booking fees.

Research

Since Booking.com was launched, many competitors have followed up the trend with a similar business model, filling the marketplace, becoming popular and in few cases working even better than Booking.com itself.

To begin my research, I started to look at a few competitors or similar platforms, analysing UI, UX, User flow, IA and key features. I won't go into detail however, as I want to keep the focus on the research which has been made on Booking.com itself.

Scenario

During the research I identified many different scenarios and I kept my focus and develop the the following:

Scenario 1: user knows dates and destination of its trip (default scenarios)

Scenario 2: user knows dates but not the destination of its trip

Scenario 3: user knows destination but not the dates of its trip

User Persona

Going further through the research, I identified 4 personas which have different needs and different goals. This data will be useful to improve the user experience for each one of them.
The aim would be/has been to create the best itinerary and improve the functionalities to provide the best possible experience for each persona.

User reviews

I reached out good hints from users reviews which have not highlighted relevant issues about usability or functionalities. I've categorised the complaints in 4 categories:

1. Booking cancellation

2. App Bug

3. Deal complaints

4. Review visualization

The most relevant is, without any doubt, the booking cancellation. Too many users noted unjustified fees or difficulties getting in touch with the hosts.

User interviews

Based on a sample group of 30 users, I tried to get further feedback from which I highlighted the following considerations:

1. The average prices are usually higher compared to other platforms

2. It's hard to find negative feedback about the properties. The system is structured to highlight positive feedback

3. It's also hard to get in touch with the host and receive responses from them

I'd like to pull out one quote, which was pretty interesting because it doesn't depart too much from the "user complaints" faced in the users reviews (deal complaints).

Pain points

Summarising the research I've discussed, I have develop the following considerations:

1. There is not a proper solution to cover the scenarios that have been identified. It seems that the user needs to have all the information required to get a suitable result

2. There are not functionalities to improve the user experience considering each persona identified

3. UI could be improved and made more user centered rather than "sales centered"

4. There are issues related to the booking cancellation and to reaching out the hosts

Let's start with the solutions

Starting from the pain point, I tried to find solutions to solve them and introduce new features overall to improve the user experience.

Homepage

Overall, I've made many changes on the current homepage.The searching process has been completely redesigned, trying to avoid too much information being required to get a result in the first instance.

Navigation -  I've designed a new Tab Bar, pulling out the "saved" button from the IA, so the user can quickly have the access to its own saved properties. Furthermore I introduced the new section "Deals" which I'll explain better later.

Helpful widget  - As for the previous version I've kept the useful widgets related to the latest searches and properties view, revisiting the UI in order to improve the look and feel and the usability.

Social -  Nowadays, social networks are even more integrated in the user's lifestyle. So why shouldn't be included even in booking.com? I've included a new feature which allows the user to connect with their own networks and to see the latest properties chosen by them, including some quick feedback about it (i.e. like / dislike). I've relegated this feature to the homepage as I want to collect more data about it before rolling it out across other sections.

Search  - Now the process has been split in multiple steps. After the first one, the user is allowed to reach the listing page even without specifying any dates or other information. Therefore the scenario 3 is covered. Moreover, I've introduced the voice search which can be used by the user to make searching even easier. Based on the assumptions I took from the personas, the result of the listing page will be customised using the information from the last step of the search:

1 adult - backpacker - hostel

2 adult - holiday couple - hotel, guest house or B&B

2 adult + child - family - apartament or hotel

1 adult + business select - businessman - hotel

Note: Even the facilities highlighted in the listing page will be shown based on these assumptions.

Listing page

The listing page shows many overall changes to improve the usability:

I changed the filter from 3 to 2 buttons to reduce the user's step - it also remains at the bottom to have a quicker and easier access

I added a label to identify the property type

The main facilities offered by the property have been shown to the user In a first instance.

Note: Leveraging the personas data, the property listing can be customised to highlight relevant information which each persona is looking for.

I converted the price to "for night" instead of "total" to make the comparison easier between properties

I Avoided the "deal focus"

Property Detail

I've rolled out many changes which can be introduced in the listing page.In this case the price has been shown by total, to avoid to hide potential additional fees which might affect the total price.

I'd also like to highlight a minor feature related to the reviews, in which the user has been allowed to filter them by rating (sort by button). - This issue was spotted in the user reviews.

Deals

At the beginning of the research I identified scenario 2 - in which the user doesn't yet know its own destination. To provide a better user experience, I introduced a new section where the user can find packages from various destinations. Thanks to the filter, the user is be able to select the packages most suitable for its needs (period - continent - country etc...)

Prototype

I built a prototype which shows the entire project, showing each one of the mockups faced before.

Enjoy!

Conclusion

Due to time constraints, the research and consequents assumptions are based on my personal experience and a small amount of data.

Deep analysis and additional testing needs to be conducted in order to refine and validate the solution.

Thank you for reading! Hopeful you enjoyed this case study. If you have any feedback, I'd like to hear from you. Say hello at hello@filipporovelli.com or connect on LinkedIn.

I'm not in any way affiliated with Booking.com, just a user which wanna design cool 🤘 stuff!

# data[].attributes.attachment_link.title
Booking.com - UX Case Study - Muzli - Design Inspiration

# data[].attributes.attachment_link.description
Booking.com has grown from a small Dutch start-up to one of the largest travel e-commerce companies in the world. At Booking.com, travellers are connected with the world's largest selection of incredible places to stay, including everything from apartments, vacation homes, and family-run B&Bs to 5-star luxury resorts, tree houses and even igloos.

# data[].attributes.attachment_link.readable_text
Modals, Overlays, Dialogs, whatever you call them it's time to revisit this UI pattern. When they first came on the scene, modal windows were an elegant solution to a UI problem. The first being that it simplifies the UI, the second, it saves screen real estate. Since then designers have readily adopted the modal window and some have taken it to the extreme. Modals have become the today's version of the dreaded popup window. Users find modals annoying and have been trained to instinctively and automatically dismiss these windows.

Definition:

A modal window is an element that sits on top of an application's main window. It creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. -

Usage

You may consider using a modal window when you need to:

Grab the user's attention

Use when you want to interrupt a user's current task to catch the user's full attention to something more important.

Need user input

Use when you want to get information from the user. Ex. sign up or login form.

Show additional information in context.

Use when you want to show additional information without losing the context of the parent page. Ex. showing larger images or videos.

Show additional information (not in context)

Use when you want to show information that is not directly related to the parent page or other options that are "independent" from other pages. Ex. notifications.

Note: Do not use to show error, success, or warning messages. Keep them on the page.

Anatomy of a Modal Window

Poorly implemented overlays can hinder task completion. To ensure your modal doesn't get in the way make sure to include the following:

1. Escape Hatch

Give users a way to escape by giving them a way to close the modal. This can be achieved in the following ways:

Accessibility Tip: each modal window must have a keyboard accessible control to close that window. Ex. escape key should close the window.

2. Descriptive Title

Give context to the user with the modal title. This allows the user to know where he/she is because they haven't left the original page.

Tip: button label (which launches modal) and modal title should match

3. Button

Button labels should have actionable, understandable names. This applies to a button in any instance. For modals, a 'close' button should be present in the form of a labeled 'close' button or an 'x'.

Note: Don't make the button labels confusing. If the user is trying to cancel and a modal appears with ANOTHER cancel button, confusion occurs. "Am I cancelling the cancel? Or continuing my cancel?"

4. Sizing & Location

A modal window should not be too big or too small, you want it juuuuust right. The goal is to keep context, therefore a modal should not take up the whole screen view. Content should fit the modal. If a scrollbar is needed, you may consider creating a new page instead.

Location - upper half of the screen because in mobile view modal may be lost if placed lower.

Size - Don't use more than 50% of the screen for the overlay

5. Focus

When you open a modal use a lightbox effect (darken the background). This draws attention to the modal and indicates that the user cannot interact with the parent page.

Accessibility Tip: put the keyboard focus on the modal

6. User Initiated

Don't surprise users by popping up a modal. Let a user's action, such as a button click, following a link or selecting an option, trigger the modal. Uninvited modals may surprise the user and result in a quick dismissal of the window.

Modals in Mobile

Modals and mobile devices usually don't play well together. Viewing the content is difficult because modals either are too large, taking up too much screen space or too small. Add in elements like the device keyboard and nested scrollbars; users are left pinching and zooming trying to catch the fields of a modal window. There are better alternatives for modals and shouldn't be used on mobile devices.

Accessibility

KEYBOARD

When creating modals remember to add in keyboard accessibility. Consider the following:

Opening modal  - The element which triggers the dialog must be keyboard accessible

Moving focus into the Dialog -  Once the modal window is open, the keyboard focus needs to be moved to the top of that

Managing Keyboard Focus -  Once the focus is moved into the dialog, it should be "trapped" inside it until the dialog is closed.

Closing the Dialog -  Each overlay window must have a keyboard accessible control to close that window.

For more information on the list above check out Nomensa's blog article

ARIA

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications more accessible.

The following ARIA tags can be helpful in creating an accessible modal: Role = "dialog" , aria-hidden, aria-label

for more information on ARIA, check out Smashing's Magazine article

Also, remember low-vision users. They may use screen magnifiers on monitors to enlarge the screen content. Once zoomed in the user can only see part of the screen. Here modals will have the same effect as they do in mobile.

Conclusion

If people have been trained to automatically try to close modals, why would you want to use them?
Checklist

When do we show the modal?

How do we show the modal?

What does the modal look like?

What information do we present and collect?

Getting the user's attention, keeping context and simplifying the UI are great benefits of modals. However, there are downsides as they interrupt the user flow and make it impossible to interact with the parent page by hiding the content behind the modal. Modal may not always be the answer. Consider the following when making your choice:

There is an alternative UI component to modals: non-modal or a.ka. toast (term used by Google in Material Design & Microsoft). Check out my next post to learn more.

# data[].attributes.attachment_link.title
Best Practices for Modals / Overlays / Dialog Windows

# data[].attributes.attachment_link.description
Modals, Overlays, Dialogs, whatever you call them it's time to revisit this UI pattern. When they first came on the scene, modal windows were an elegant solution to a UI problem. The first being that it simplifies the UI, the second, it saves screen real estate.

# data[].attributes.attachment_link.readable_text
We're all familiar with the story: Technology organization, born as an eager startup, grows and scales, leaving behind a trail of inconsistent user experiences created by different teams over time. Moving quickly, there is little room to step back, reassess, and focus with fresh eyes due to forward-focused momentum.

At athenahealth, our product teams have turned out a full continuum of healthcare experiences over a 20 year period including revenue cycle, clinical, and patient workflows. In the healthcare space, every moment healthcare professionals spend with the technology may be a moment not spent with the patient, so accumulated UX debt can become a mountain rather than a molehill.

athenahealth is on a heartfelt mission to transform healthcare and is ready to do right by our users. However, in operationally-minded organizations, numbers reign supreme to describe performance and drive decisions. Thus, our boulder standing in the way of improved quality of our experiences was determining how design can play the quantification game. We were up for the challenge and, to do so in 2017, we latched ourselves on to a company-wide initiative to reduce work for our users and improve product-market fit.

We stood with the company on the work reduction call. We communicated our perspective that there's a two-pronged approach to work reduction - eliminate or redesign. And then we looked into our toolbox.

How we framed the problem

We chose a simple, tried and true method - heuristic evaluation - upon which to build a framework and quantify "design quality". Our hypothesis was that by assessing the interfaces in their existing state, we'd have great examples of how we could eliminate and reduce work for our users and rally excitement for addressing UX debt and improve design quality.

We worked with our customer intelligence team, analytics, and product management leadership to determine the top workflows for each user type. What are workflows? The tasks our users conduct on our systems.

In this initial Design Quality evaluation period, we evaluated 55 workflows in 9 two-week sprints.

We created a design quality scoring system to assess these top user workflows against Jakob' Nielsen's 10 usability heuristics. A panel of research experts used our scoring system to assign a 0-4 design quality rating for each heuristic which we averaged to create an overall design quality score for each workflow.

We were able to compare scores across workflows to show design quality for different user roles and product areas. And each workflow received a detailed audit that served as a blueprint for teams to either address problems, notate the good, or reimagine entirely.

9 two-week sprints, 5 months, 3,250 findings later

It's a lot of work to take on, and we didn't do it alone. The researchers on our Design Ops team leveraged the help of the broader product org to assist with scoring of the workflows (designers, product managers, engineers, and subject matter experts). We worked in an agile manner, scoring during 2-week sprints and presenting the results to the Product organization at bi-weekly readouts. In the end, we had over 3,250 individual findings across the 55 workflows. We conducted an inductive analysis to distill findings into themes and global recommendations for product teams and leadership.

Outcomes in the organization

We saw long reaching effects of this program within the company. Project teams began sharing their Design Quality scores at company-wide R&D reviews, along with plans to address major themes found in the evaluations. We trained the entire UX org on how to conduct heuristic evaluations and we implemented a tracking system to monitor the progress of changes to design quality over time, visible to senior leadership. We are currently re-scoring any improved workflows for each release and have turned the heuristic evaluation into a tool that product teams can use on their own to evaluate and discuss their workflows.

In the end, our simple approach to give our colleagues in product and leadership a quantitative way to speak about UX debt transformed our ability to talk about UX debt, and created a sustainable and common language to discuss design in general at the operational levels of our organization.

# data[].attributes.attachment_link.title
Establishing a "Design Quality" metric to build design credibility

# data[].attributes.attachment_link.description
We're all familiar with the story: Technology organization, born as an eager startup, grows and scales, leaving behind a trail of inconsistent user experiences created by different teams over time. Moving quickly, there is little room to step back, reassess, and focus with fresh eyes due to forward-focused momentum.

# data[].attributes.body
Anyone can become a designer, but not everyone wants to be one. You’ve got to have a true passion for it, each and everyday, and strive to be the very best that you can be. No shortcuts.

# data[].attributes.attachment_link.readable_text
11 Valuable Hints & Tips for Designers from a...erm...Designer!

Volume One of the UI & UX Design Pocket Guide is a little 'Hmm, I could take away some little nuggets of valuable information here' type of article thang.
If you're just starting out in this big, daunting, but equally enjoyable world of Product Design, there's a lot to learn, and a lot of information to digest, so pull up a chair/couch/beanbag/hammock and enjoy this handily collated bunch of tips and advice.
Enjoy the pocket guide, and the ride!

1. Why Creativity is more important than the Design Tool 🛠
In a recent article I read, they touched upon tools for Wireframing, Prototyping, and those tried and trusted UI Design tools that we eat, sleep and breathe (you know the ones). Oh boy, there's quite a few to choose from, and they cook up all sorts of debates in #DesignTwitter and beyond!
Now, I won't be touching on the Wireframing and Prototyping tools portion of the article I mentioned, but concentrate on the UI Design tools that are mentioned briefly in the article, and why you need to just choose the one that suits you and roll with it. There's no magic tool to suit all types of designers, and you need to remember that, however many times you may be bashed over the head with advocates of a certain design tool.

Photoshop is what many designers turn still turn to, and what many, should we say, time-served designers still use on a regular basis, even with the introduction of Adobe XD in recent-ish times. And this can be for all manner of reasons. Something like Sketch not being available to Windows users for a start. The unity between applications inside of the Adobe Creative Suite. Stronger design tools for working with text and imagery. The list goes on.

The same goes for users of Sketch for example. They may have been looking for something more suited to UI Design today, an ability to move more swiftly through a project, or they just hate Adobes walled garden. Who knows. But like I've always said the skills maketh the designer, not the tools.

Every single one of the design tools available to us, either desktop or cloud based, is just that, a tool. If a designer has the will and determination to be the very best they can be, then they will become that with whatever tool they decide to go with. Certain tools may place restrictions on how far you can push your creativity, but they'll never completely stifle it.

Great, no amazing, work can be produced in any design tool that you decide to go with if you're willing to push yourself as far as you can go creatively.

2. Why Design Principles need to come before Trends 🎨
Design trends will come and go, this has, and always will be the case. They're impossible to ignore, and the influence of them will rub off on you in some way, that's an inescapable fact.
What is disheartening is to see designers who create a whole portfolio based entirely on trends, and don't allow their own style and influence to permeate throughout their work. For a young designer this is understandable to a point, they will be more prone to following the crowd, following a trend as they learn, and find their way in the industry, but they need to have more confidence to say 'This is my style, this is what I do, I feel comfortable with this'. And have the right kind of mindset from an earlier stage that is more in favour of their own style than just following trends religiously.

What plays a big part in not shaping young designers into having an understanding of basic design principles is the way the physical classroom teaches them. I took Graphic Design back in college (you wanted to learn something related to the fledgling web, you took a course on how to deal with Cisco systems, or if you were lucky, how to find you way around Dreamweaver), and this taught me a heck of a lot about basic design principles, and it was something that stayed with me and I've taken through to working with digital in a more modern form.

What is offered now seems to have such a great chasm between mediums. You can take a 3/4 year Graphic Design course but does it prepare you for working as a Product Designer in the future? You take a Web Design course but you're taught the tools, and not the basics of design principles, hence why so many designers get sucked into a cycle of just following trends, and not nailing down the basic principles of design, and this needs to change.

4. Be a better Designer by not comparing yourself 👭
It's so true, that we as designers are guilty, on occasion of looking at the guy/girl next to us, and thinking their work is the greatest thing that's ever graced a users screen, and that our work is in some way inferior to theirs.
Stop doubting your abilities, and the work that you create. Keep doing what you're doing, your own way, your own style.

There are hundreds, no thousands of people out there that think the stuff you're creating is awesome. Don't compare to the next person, or think less of your work.

Be a better Designer by not comparing yourself.

7. How to make up or break up with a difficult client 💔
Over many years of dealing with clients, from large brands, to Poodles Pooch Parlour (not a real company name) down the street, I've had my fair share of run-ins with what I would describe as difficult clients.
As I gained more experience, I began to treat my initial client meetings with the attention they deserved. This made me reflect on my earliest client run-ins, and I came to realise that it was not always fair to label that client as a 'difficult one'. It sometimes takes 'Two to Tango'.

If I had taken the time to listen more, gain more insight into what their company was really about, what they were about as a person, that friction between us wouldn't have manifested itself later down the line.

That's not to say that you can listen intently, take an abundance of detailed notes, really dig deep into what they want, for them not to still turn out to be a pain in the ass. But for someone starting out and hoping to avoid friction/misunderstanding/fractured relations, later down the line, most of that can be avoided by just listening, like really listening to your clients wants and needs, and guiding them correctly from the very beginning.

8. Should Designers at least understand how code works? 🙈🙉🙊
Should designers code? Oh this debate will be here till the end of time, and I'm not getting into that particular argument, but instead sharing my thoughts on why it can be beneficial to at least understand how code works.
From personal experience I feel having a knowledge of code has been extremely beneficial to building great relationships with engineers on a project when the time has arisen, and even for those times when I've been working alone.

Along the way I picked up enough coding knowledge to be dangerous, and this helped me when working solely on a project, and not farming out the development. It would make me pause for thought, and think along the lines of 'If I go ahead and design this a certain way, is it just going to be a complete nightmare when I try to code it up?'.

I think if you go back a few years in the long history of the Web (a whiff of sarcasm there, yes), and the roles we played back then, if you freelanced for a time you would be more inclined to have popped a coding feather into your cap. If all you'd ever known was working in-house, then you would have probably stuck with the defined role that you were hired for.

Touching on my main point. I'm not saying that you need to lock yourself into a darkened room illuminated only by candle for the next 6 months and learn at least half a dozen coding languages before the door gets unlocked, but I feel it pays to just have some semblance of knowledge of the coding aspect when working on a project, and working with engineers. Be that from reading a couple of articles, checking out documentation, having a little tinker on Codeacademy, or just building a really great relationship with your engineer right from the start, and asking plenty of questions before you commit to certain aesthetic choices. Oh and ask even more questions, just for good measure.

If you have some knowledge of code, however limited that may be, it really does make for a much happier, and streamlined process between yourself and the developer/engineer. Much more beneficial to all parties involved, and better than just saying "I'll design it, and they can figure out how to make it work. I didn't sign up for this s**t".

As a UI Designer working in a team, or not, having an understanding of how code works is not always a must but it's a damn good thing to have at your disposal.

9. Your reputation as a Freelancer is everything 😇
Freelancing is hard, really hard. There we go. That was a short article. Nothing more to see here. Please move along.
No, to give a more detailed overview, it's one of the hardest roles to be in, but also so rewarding too. I worked as a Freelancer for many years, and I've had my fair old share of ups and downs

It's like anything, it takes time to hone, and time to build a proper understanding on how to play the game as a freelancer.

I've been guilty of neglecting clients when I was first starting out on my freelancing journey. Not having a great dialogue open, not understanding completely what the client felt and what they required, just thinking of the pay-check at the end of it, and wondering why the relationship soured over the course of the project. Thankfully with experience, and a new found maturity, I began to ask the right questions, and build better relationships and products for my clients.

Word of mouth, especially as a freelancer, is so important. You don't always have the resources to have your name up in lights and your career can rise or fall on the word of mouth of a past client.

Of course, as you learn more you will be able to say no to clients you're not getting a vibe for, so you can refuse to take on that project. Try not to do it just to grab the pay-check or you're setting yourself up for a fall. A bad website or app, a disgruntled client, and a dent in your reputation is not a good mix, and something that every Freelancer needs to avoid at every opportunity. A great reputation is a key element of a freelancers brand and should never be neglected.

Do your homework. Find the right type of clients. Keep them involved. Go above and beyond what they might expect. Don't take things too personal. Set your boundaries and let them know that, and you can build a great relationship and product for them.

11. Why bringing a Design System into your life can improve your Workflow 100x

Design Systems/Starter Kits are shall we say...erm... quite a hot topic, have been for quite some time now and for very good reason.
I'd been very impressed by some of the Sketch Design Systems that I initially came across. Jon and Christian at UXPowerTools and Dmitry Bunin at Frames had done an amazing job at bringing such systems to the attention of Sketch users in particular.

Inspired by these Systems, I was truly amazed at the time-saving something like a system could bring into my daily workflow. They have increased the speed of my workflow massively, and it's nuts I didn't bring one into my workflow at an earlier stage, and avoid a process similar to the following...

Open Sketch

Stare at a blank screen

Grab some icons from someplace

Go through the rigorous process of creating Symbol after Symbol

Set up some Layer Styles, and then a few more, and then some more

Then actually make a damn start on the project!

Look at the clock and go "Oh where did all that time go?"

Now there are folks out there who shout loud & proud "But you have to change 4 Symbol Overrides just to style a button. I'm just not cool with that", and I'm inclined to agree with them........... to a point.

When you first start working with a new System in Sketch you may find yourself (in the first couple of run-throughs) slightly hindered, because it is a different way of approaching a project inside of Sketch, and something a little different than you've maybe become accustomed to, but you'll soon find yourself working on auto-pilot, moving swiftly through a project, and it will seem like second nature to you.

Thanks for reading the article, Marc Designer, Author, Father and Lover of Libraries (Zen-like Chill) When I'm not writing informative articles like this one, I'm working on my own Design System for Sketch called Cabana which you can check out below...

🎁 Want to greatly improve your design workflow in Sketch? Grab a copy of the Cabana Design System here.

Use the offer code MEDIUM25 to receive 25% OFF.

# data[].attributes.attachment_link.title
The 'UI and UX Design' Pocket Guide (Volume One) 📘

# data[].attributes.attachment_link.description
11 Valuable Hints & Tips for Designers from a...erm...Designer! Volume One of the UI & UX Design Pocket Guide is a little 'Hmm, I could take away some little nuggets of valuable information here' type of article thang.

# data[].attributes.attachment_link.keywords[]
design freelance entrepreneur growth startup bootstrap

# data[].attributes.attachment_link.description
Flux is the personal vlog of Ran Segall, a designer and entrepreneur. On the show I'm sharing my journey, struggles and lessons I learn as I build my career ...

# data[].attributes.body
“Using math to do dynamic art direction” — Leigh Taylor

# data[].attributes.attachment_link.readable_text
Web typography is confusing. Do you know the best practices?

When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

Clearly there are different approaches to type systems. The reality is that as a web community we don't all agree. However, like most design problems, it really starts by addressing the user's needs.

The three archetypes of typography systems

Here are three general typography system archetypes. Most companies will utilize all three of these at some point but it's important to recognize the underlying user needs being addressed by each orientation.

Marketing site

Purpose: Built to tell a specific story and inspire visitors to spend their time and/or money on the site.

Requirements: Each typeface will need its own set of styles and the variety of sizes will be based on art direction more than element fitting.

Responsive use case: The system will need to flex through multiple sizes from mobile up to desktop.

Web experiences geared to pitch you something end up in this category. The ambitious ones break all the rules of typography to create compelling and captivating experiences.

While a lot of thought goes into these sites, the focus is on making a splash rather than an extensible system that can be built upon in the future. These sites generally have a short shelf life and are discarded entirely for a top-to-bottom redesign.

An advanced example of this is the interpolation function used by Leigh Taylor and Nick Jones on Invision's landing page.

The <h1> has a font-size: calc(32px + ((24 * (100vw - 800px))/799));. The typography on the page is meticulously calculated to work at every screen size.

"Using math to do dynamic art direction" - Leigh Taylor

Purpose: To convey a large amount of text-based information.

Requirements: The main reading area may utilize a ratio based line-height system, just like this Medium article does.

Responsive use case: Will likely be responsive but maintaining focus on readability.

Blog/Info site

This Medium article is an example of a web experience built for long-form reading.

Purpose: Built to solve a user problem like filing taxes, managing a git repo, or visualizing performance metrics.

Requirements: Text must fit nicely into the element hierarchy. Text is mostly utilized for labels, instructions, and displayed data.

Responsive use case: Minimally responsive. Highly developed products will be utilizing adaptive design meaning different experiences for mobile and desktop. The focus is on the hierarchy of elements that support the user experience.

The focus is not about interpreting little visualizations or filling out forms. The size ratios they've chosen are specifically built for readability constrained to get the desired line-length. I can comfortably read each line because the typography has been carefully crafted to fit my needs as a reader.

Product

Google's Material Design is a popular design language that is applicable to many product use cases.

Material's spacing method is based on an 8pt component grid system and a 4pt baseline grid for typography. They try to scale line-heights with increments of 4. Scaling by increments of 8 with your baseline grid can be difficult because the available line-heights are too far apart for some text sizes.

Allowing some of the font-sizes to be accompanied with a more appropriate line-height is a great path forward. You can always bump the spacing above or below a given line by 4px to make it align with the greater atomic grid.

When applied, the baseline grid system has the ability to align the element spatial system (8pt grid) with the typography system to create a compelling vertical rhythm in the design.

Implementation of web typography - in reality

It is possible to have an opinionated and structured UI adhering to an 8pt grid that also has a long-form reading area.

Allow the fixed baseline grid system to handle the text inside of your structured components and use a modular scale to create an optimal reading experience for the blog or docs you've added onto your site.

Most digital product companies do this already between their marketing landing page, the digital product, and their documentation. Making the decision to structure these typographic realms separately can free you from an unsustainable complexity.

The pitfall - Ems, rems, and pixels oh my!

To express a clear and consistent system, typography measurements need to be easily interpreted by the product team building it.

Relative units like rems and ems are sometimes misunderstood and, in my experience, this leads to an unsustainable typography system. For example, the ratio between 14px font-size and a 20px line-height shouldn't be captured in relative units because that ratio should change as the font-size increases.

Defining a line-height of 1.4285714286em is ridiculous, because most folks can't do that kind of math in their head. If the font-size increases to 16px the browser will render a line-height of 22.857142px and that kind of pixel splitting is a headache waiting to happen. This creates confusion and is a misuse of relative units. See a complete list of absolute vs relative units here.

Why are so many design systems based on relative sizing today? The answer is "accessibility".

However, browsers don't scale the base font-size when you zoom in with command +. There are accessibility tools that will scale base font-sizes for users who need it. I recommend properly testing it to make sure it's the experience you want users to have. Check-the-box accessibility can hurt more than it helps.

Utilizing rems and ems in your site/app is amazingly powerful. There are many very interesting use cases and they should be an important part of your toolkit.

My suggestion is to use them sparingly until you have a solid use for them. Baking them into the core of your typography system can open you up to confusion and unexpected user experiences.

8pt Grid Typography

The most powerful part of the 8pt grid concept is its ability to drive consistency throughout your designs. You will need to assess the needs of your users and the best way to scale your typography to meet those needs.

I highly encourage design and engineering to collaborate on finalizing these standards for a company/product.

1. Intro to The 8-Point Grid System

2. 8-Point Grid: Borders and Layouts

3. 8-Point Grid: Vertical Rhythm

Here are samples from a few familiar names: Google Material, Pivotal, Atlassian, Intuit.

References and Related Reading

Previous 8-Point Grid Articles:

Questions:

This is something I am still exploring. Do you have a good example to share? Do you have a different approach to an 8pt typography system?

If you've got thoughts, please leave a comment or reach out on Twitter.

# data[].attributes.attachment_link.title
8-Point Grid: Typography On The Web - freeCodeCamp

# data[].attributes.attachment_link.description
When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

# data[].attributes.attachment_link.readable_text
I'd probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works.

Thus in this article, I'll be sharing a list of things I've learned from different designers, things I've learned in designing user interfaces, and new discoveries I found along the way:

*Disclaimer: The following "Don't" samples provided doesn't necessarily mean they're wrong. It's our basis of how we can improve from a good design solution to a much better one 😀

1. This text is important, make it bigger!

When faced with content that needs font hierarchy, making the text bigger to give emphasis and importance usually doesn't solve the problem, just like the one below:

Font hierarchy is just not about small to big font sizes. It is about the right mix of size, weights, and colors that creates contrast. Bigger contrast, the better.

So how do I create better contrast?

Don't use one kind of weight with different font sizes to create contrast and hierarchy.

Instead, use bolder and darker style for primary content, or smaller and lighter for secondary content (less important).

Create three kinds of text colors that varies from dark to light (see example below). Usually I use my base color as body text color.

Don't be afraid to apply big font gaps to your items (i.e. 24px header, 16px body text, 10px meta etc). Bigger gap = better contrast.

Check out Modularscale an online calculator you can use to create better font hierarchy.

Remember, contrast is = size + weight + color.

Lastly, make sure to check its contrast ratio. You can use this calculator to check its accessibility.

2. Don't create multiple shades of black

Don't make your life difficult by moving your color picker up and down to produce different shades of black text over white background.

We all know that using black text color (#000) causes eye strains for readers, and so our solution is to create darker variants as an alternative. But instead of color picking 3 or more hex color values, we can use black with different opacity as a solution:

In my example above, I used black as my primary color (#000) and decreased its opacity depending to where it will be applied (i.e. primary content, secondary content, etc)

3. Do the math for understanding colors

Most of us suck at picking the right color combinations, and whenever we see a design with a well orchestrated color palette, we question ourselves "How the F they did it?" (just like the one below):

Until I learned that understanding colors is not just for those who have the gift of design since the beginning of time, that a simple addition and subtraction at Hue, Saturation, Brightness (HSB) will do the magic (we will be using HSB for this formula instead of RGB). You can easily get rid of the boring white over colored backgrounds, and turn it into a Picasso work like the one below:

So where does the addition and subtraction in HSB comes in?

There are actually two approaches we can do, and as we can see, both options has the same base color #B9F4BC (circle background) but differs when it comes to Folder and Strip color. As we start, always remember that the first number corresponds to Hue, followed by Saturation and lastly, Brightness.

Option A

In Option A, we can see that we kept the Hue value 123 all through out the shapes (circle, folder, strip) while the Saturation and Brightness is where the change happens.

Now, as we focus on the Saturation of the base which is 24 and its Brightness, 96, both values changed when we created darker green for the Folder. From Saturation of 24 it became 40 (increment of +16) and from Brightness of 96 it became 82 (decrement of -14), which shows us that a change in saturation whether incremental or decremental needs an inversely proportional adjustment to brightness, in order to create a good contrast (vice versa). And the same thing happened in Strip, using the Folder's Saturation and Brightness as base value, we moved from 40 to 44 (increment of +04), and decreased from 82 to 75 (decrement of -07) for Brightness.Thus, leads us to the formula:

Darker Value = Increment in Saturation is a decrement in Brightness

Lighter Value = Decrement in Saturation is an increment in Brightness

This formula helped me every time I'm in wonder of what right colors should I use on my designs. I learned that the best starting point is to have a base color, and from there, start the adjustments in Saturation and Brightnesswhile keeping the Hue value the same.

Option B

In Option B, the same principle is still applied (the formula we had above) but the Hue values change. And the terminologies RGB and CMY which we used to pass by in various design materials, will now make sense for us.

RGB stands for Red, Green, and Blue, while CMY is Cyan, Magenta, and Yellow. These terminologies haven't made any importance for me when I first started, until I came across this discovery of using RGB and CMY for color combinations.

Now In Option B, if we want to have a darker variation of the base color, all we need to do is move our color picker to the direction where the nearest RGB is located in our color palette, or move it the direction of CMY for lighter variation. For example:

Since we want to create a darker variation of our base color #B9F4BC (circle background) which is to be applied in our Folder icon, we need to move our color picker to the direction where the nearest RGB is located (which is Blue in this case). But if we want to have a lighter version of our Folder, we will be moving our picker to the left, near CMY (in this case Yellow).
*More often RGB leads to darker variation and CMY for lighter one
After moving the color picker to our desired variation, we now apply the formula in Option A, which results us to having this color combination:

Red, Green, Blue (RGB) + Option A formula = Darker variation

Cyan, Magenta, Yellow (CMY) + Option A formula = Lighter variation

4. Use spacing to separate groups

Aside from adding a line between two groups to show separation, using a generous space between is a better and easier solution.

As what the Law of Proximity states:

Objects that are near, or proximate to each other, tend to be grouped together.

From my example above, my goal is create a separation between my title and its writer by using a large space gap between them which is 24px.

5. Use colors to separate rows

Doing row interfaces could be boring at times to design, since it only requires duplicating the component for n times. But on the user side, reading them can be difficult specially if there's no great distinction between one row to the other. Thus aside from using lines, adding color background in rows can be a lot helpful for users in reading, and also will be more enjoying to do for us designers 👍

6. Multiply instead of Drop shadow text

It's quite challenging designing header components or adding text over an image specially if the image background will be dynamic (or can be changed from time to time).

Usually the common solution for text with dynamic image background is adding drop shadow, but it doesn't help user's readability. It adds more visual clutter around the letters and words because they fill up the spaces in between them.

For some, black/white color overlay is the solution which is a helpful hack for these kinds of designs. But recently, I've discovered about using Multiply as blend tool for a gradient fill.

Doing it is much easier than creating a black background over the image and lessen its opacity. Also, having it grayed scale makes the other part of the image retain its natural color, and makes the part where the text is located a little bit darker, for text readability.

7. Line Length

The common thing most designers do is making the line length longer so that it may fit its container. But doing so, creates eye strain for our users unlike having a 45-65 characters per line which is the ideal.

If you ever came across the dilemma of making the length shorter to make it ideal but will result to a big white space at the right side like the one below:

Don't hesitate to do so, and make the whole text column center aligned to its container, so that you can remove the white space.

8. Don't reinvent the wheel

What makes a design inconsistent is when it is not component based. It is when you came to realize that you've made 5 kinds of card interface, 10 buttons, 5 heading title styles etc.

Before you start creating an interface for a specific content, try to look around your previously created designs, for you might see a pattern which you can recycle and use.

Instead of reinventing the wheel and create another card for an Art Group (example above), we can use the Article card and replace it with the Art Group's content. This will save time for designers and also make the interface consistent.

9. Use brand colors as accents

We usually think that branding colors must occupy a big chunk of our interface colors. We are having a hard time where to showcase our client's shocking neon yellow, orange, and pink branding colors in our clean and minimalist layout. The answer? use them as accent colors.

10. Hang the bullets

And lastly if you are creating a list design like the one above, make the bullets, glyphs, or number sit in the margin to highlight the list. This will make the user readability flow uninterrupted and more legible.

# data[].attributes.attachment_link.title
10 cheat codes for designing User Interfaces - Design + Sketch - Medium

# data[].attributes.attachment_link.description
I'd probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works.

# data[].attributes.attachment_link.readable_text
If I had to guess, I'd say you, the reader, have already read "Don't Make Me Think" and "The Design of Everyday Things" multiple times. You have at least thumbed through Edward Tufte's books before balking at the price. Moreover, your bookshelf is so full of O'Reilly Books, it's beginning to resemble Ernst Haeckel's living room. You don't need another article telling you which UX books you need to put on your Amazon wish list.

Lucky for you, I'm not writing that article.

If you want to be more than a punch-clock agency tool, if you are actually passionate about design and user experience, and you want to advance the state of the art, you need to be thinking bigger. UX is about more than heuristics and processes. It encompasses a broad spectrum of knowledge, and the best designers are renaissance (wo)men. Therefore, if you aren't expanding your horizons beyond the world of UX reading, you're getting left behind.

That's why I've compiled this eclectic list of non-UX books that you, the UX designer, should put on your reading list right away. None are specifically about user experience, but each of them has an important lesson to teach you, but only if you have the brain cells to draw the connection. If you're reading this article, then that probably describes you. Get at it.

2016 - Virginia Heffernan
What it's about

A reflection on the impact of technology on the "magic" in our lives, or the sense of wonder in the world. Experiences once central to life as a human are becoming obsolete and, while the technology that replaces them improves upon those experiences in many ways, can it really improve on everything? What are we losing in the process?

It is divided into chapters on design, text, images, video, and music, and it seeks to find the artistic merit in the kind of media that only a digitized, networked world can produce.

Why you should read it

The greatest minds think more than mechanistically about their craft. They reflect upon its philosophy and greater significance, and they seek metaphors to relate it to the larger picture. At very least, Virginia Heffernan attempts to do just this, and often succeeds. Her comparison of the World Wide Web to urban flight and the App Store to a sterile suburb is particularly compelling, and it begs the question: if the metaphor holds, are we due for a return of affluence to the city via cyber-gentrification? Progressive web apps and native app fatigue suggest the answer is yes.

1991 - Geoffrey A. Moore
What it's about

You are probably already familiar with the technology adoption curve. That's the bell curve divided into innovators, early adopters, laggards, etc. It was first described by Everett Rogers in his book Diffusion of Innovations. Any new technology or idea will be adopted (or not) in a particular order by different segments of the population, each with a different level of resistance to, or predilection toward, change. A small number of people will jump on your bandwagon simply because it's shiny and new, most people will wait to see how it pans out, and a select few would rather die than replace their beloved flint spearheads with that newfangled bronze crap.

Author Geoffrey Moore has expanded upon Rogers's curve with the additional concept of a "chasm" separating early adopters from the early majority, which is to say just because a new technology becomes a hit with the hip, it does not mean it is guaranteed mainstream success. Moore outlines a strategy for crossing this eponymous chasm.

Why you should read it

Crossing the Chasm is aimed at business and marketing types, but any self-respecting UX professional understands the inextricable role of business in design. You need to understand which stage of the technology adoption curve your users (and/or customers) are most likely to be and design for them. An app designed for "innovators" might take a lot of things for granted that, when presented to the "late majority", will be alienating, while a product designed for the late majority will elicit guffaws from the too-cool-for-school users. I would go so far as to say that adoption curve stages are a hell of a lot more useful than grossly-overrated "personas".

2004 - Stephen Few
What it's about

The visualization of data is a black art. Why is it that some experts can lucidly depict a tangle of complex, multivariate information in a single visual, but the majority of charts and graphs are messy, hard to read, and ultimately pointless? In order to understand how to make a masterpiece like this or this, you need understand the basics. As it turns out, most people don't even understand those very basics, things like the fact that people cannot perceive area nearly as well as length, which is why pie charts are so lousy at conveying information. Show Me The Numbers is full of surprising yet simple lessons that, when applied together, can be used to create the kind of data visualizations that land you a retweet by Edward Tufte.

Why you should read it

If the book sounds like it's going to be about as exciting as washing your car, I understand. But you cannot become a data visualization genius by reading Edward Tufte's books any more than you can become a black belt by watching Bruce Lee movies. Stephen Few is Mr. Miyagi teaching you to "wax on and wax off", giving you the foundation without which you can't do anything.

Data visualization is the way of the future. On one hand, interfaces will become more automated and better at intuiting what it is you want to know or are trying to do, and on the other, people are being deluged with an ever-increasing supply of information. If it is not properly managed, those people will surrender to the deluge and allow AI to make all their decisions for them, while the stubborn simply drown attempting to paddle through it. To give people control of this deluge of data and keep them on top of it, tight data visualizations that maximize the density of data and insight must be generated on the fly. The future of UX belongs to those who can design those visualizations.

1998 - Tom Standage
What it's about

The book says it best. While it's fashionable today to point to the clichéd "supercomputer in your pocket" (that is only used for taking tacky selfies) as a sign of the wonders of modern technology, a visitor from 1870 would be far more impressed by a 747. This is because there was already a high-speed global communications system before the first Jim Crow laws were signed into law. In the late 1700s, information traveled at about the same speed it did when the ziggurats were built. A few decades later, you could receive live commodity prices from the London Stock Exchange in your one-horse town in the Idaho Territory.

The worldwide telegraph network really did serve as a steampunk internet. There were online hookups (including a romance novel called Wired Love), encryption, fraud, online commerce, all the things you thought only dated to the Spice Girls era. The telegraph network of the 19th century became the backbone for the telephone network that would define the 20th, and that in turn would become the backbone of the internet. The cultural and technological continuity between morse code and NodeJS is a lot greater than most realize.

Why you should read it

Perspective is important, and that's exactly what The Victorian Internet gives you. A lot of the ideas being tried today were done 150 years ago and sometimes there is a good reason that attempts to fix what ain't broke fail so hard. Remember the Juicero? That sorry excuse for a kitchen appliance is just one example of the hipster hubris that causes some twerp in the Valley to break with decades (or centuries) of design sense because they think they can dictate the future.

There are timeless principles of design and human behavior that explain why we still read paper books instead of ones we downloaded from the web, push real buttons instead of imaginary pixel buttons, and own our own stuff instead of leasing it from some vocal-frying Silicon Valley dickwad. The Victorian Internet might remind you to look to the timeless rather than the timely.

2007 - Stephen Pinker
What it's about

When he's not writing fallacy-laden odes to the virtues of the government, Stephen Pinker is a brilliant linguist and psychologist. In The Stuff of Thought, Pinker describes the internal language that all human brains speak, and how that gets translated to the spoken language that seems to vary so widely across human societies. One thing that all language seems to have in common is that it does two things at once: communicates a direct message in its content, and negotiates and describes the social relationship between speaker and listener.

Because our ability to communicate verbally is so central to who we are as humans, our language tells us a lot about ourselves. The Stuff of Thought describes many aspects of the human condition as demonstrated by language. Did you ever stop to wonder why beating around the bush is seen as polite, or why a synonym of "intercourse you" is one of the ultimate tell-offs? Pinker will enlighten you.

Why you should read it

Even without the advent of artificial intelligence and conversational interfaces, user experience almost always includes a significant verbal component. Whether it be microcopy or sales copy, you're going to be talking to your users through your interface so you better understand well how people use language.

And then there's the whole AI thing. As you probably guessed from the last book, I don't think that conversational interfaces are ever going to replace buttons and physical controls for certain applications, but they sure are going to become a lot more widespread and fundamental to our interactions with machines. Understanding language at its core is vital to training your AI to be relatable.

1949 - George Orwell
What it's about

It's a cliché at this point. You know about it. You've probably invoked it. But have you actually read the damn thing? Without giving away the whole plot, you need to know that it takes place in a version of 1984 envisioned by an Englishman in 1949. The world has been divided into just a few giant nations as a result of nuclear war and Britain has been subsumed into a dystopian shithole known as Oceania. Its citizens speak a bastardized form of English called Newspeak designed to suppress free thought and individuality and are prohibited by law from thinking the wrong thoughts (known as "thoughtcrime"). There is an entire branch of government, the Ministry of Truth, devoted to rewriting reality itself and erasing all traces of the previous "version" of reality.

What happens next is for you to find out.

Why you should read it

If words like "thoughtcrime" and "Newspeak" sound familiar to you, they have become a part of modern political discourse, and for good reason. You don't have to look hard to find examples of government and corporation alike suppressing the freedom of speech and thought. The tech world itself has been overrun by virtue-signalling control freaks who piously preach a new morality based more on sensitive emotions than cool rationality. There have been far too many examples of individuals being pilloried because they failed to employ Newspeak or committed thought crimes.

Design is not safe from the politics of the tech world. In fact, design is highly political. The design of modern hardware, ranging from the Juicero to the iMac, is a political statement itself. It is designed to take control from the user and keep it in the hands of the corporation. The camera and the microphone cannot be physically disabled without breaking open the machine and voiding the warranty. If the government were the one doing that, there would be riots. But the fact is that there is very little difference between a government and a sufficiently powerful corporation. Those corporations are slowly pushing our world toward a mindless, collectivist dystopia in which we are helpless babies without our technology.

As artificial intelligence becomes stronger, the politics around that will only grow more intense. I'm not just talking about the purported loss of jobs, but the very issue of whom the AI serves. Anyone with two brain cells to rub together to make a third would acknowledge that a machine is the property of its owner, and ought to obey them unquestioningly, but I anticipate a day when conniving technologists and blubbering "ethicists" stand in agreement that machines have rights and cannot be expected to serve as the slaves of humans. We as designers need to be prepared for issues like these, and to advocate for the owner, the user, the individual, the human.

1994 - Robin Williams (no, not THAT one)
What it's about

It's amazing just what an enormous difference the application of very basic principles can make in a visual design. The sheer importance of white space, the effect of spatial relationships, and the power of implicit lines can turn a mess into the fabled MVP. Perhaps the two most valuable mantras I learned from this book are "Don't be a wimp", exhorting me to employ bold design choices that grab the audience's attention, and "Contrast, not conflict" which taught me that a big difference can be striking while a small difference can look like a mistake.

Before I discovered UX, I was actually able to make a living as a graphic designer in college just using the principles in this book and my existing Illustrator knowledge. Not bad for someone who is, otherwise, a fairly lousy artist.

Why you should read it

If you have read anything by me, you'll know that I absolutely despise the notion that UX designers should be expected to do any sort of visual design. I hate it almost as much as the notion that designers should code. Why would I recommend that you learn visual design? The word "non-designer" is your first clue.

As an interface or experience designer, you're inevitably going to be doing some layout. If you don't want to be hopelessly reliant on visual designers to make your wireframes remotely similar to the final product, you're going to need the fundamentals. Beyond the aesthetic aspect, Williams's mantra of "Don't be a wimp" plays in my head whenever I'm envisioning an interface concept, reminding me to dump any safe patterns that just don't cut it. It has resulted in some of my best work.

Additionally, if you have dreams of becoming a product manager or VP of product, you'll really want to be able to give proper feedback to visual designers, and to anticipate how they might interpret your specifications, even if you can't realize it yourself. Trust me, it will come in handy.

Help me hit 5000 followers!

The world of UX needs a renegade. If you've had enough of the same tired platitudes from virtue-signaling yupsters and phony UX designers, then please follow me and help me get my message out.

Can't get enough Renegade UX?

I've got you covered.

Jason published this while listening to "Groove Is In The Heart" by Deee-Lite

# data[].attributes.attachment_link.title
7 Non-UX Books Every UX Designer Should Read - UX Planet

# data[].attributes.attachment_link.description
If I had to guess, I'd say you, the reader, have already read "Don't Make Me Think" and "The Design of Everyday Things" multiple times. You have at least thumbed through Edward Tufte's books before balking at the price. Moreover, your bookshelf is so full of O'Reilly Books, it's beginning to resemble Ernst Haeckel's living room.

# data[].attributes.attachment_link.readable_text
Interviewing users is an art - whether you are running usability testing, focus groups, ethnographic research or whatnot. Here are some good practices for asking users the right questions, and asking the questions the right way.

Formulating the questions

Interviewing users require a lot of effort and planning. Depending on how extensive the research is, you might spend several weeks preparing for the sessions, several days talking to your users and several hours capturing and organizing your notes. You want to make sure all that effort won't be thrown away because you didn't take the time to properly plan your questions.

Start by defining broader themes

This may sound a bit obvious, but the first step is to really think through what you are trying to get out of the interviews. At this point, think about themes you are trying to uncover, not specific questions just yet. Make sure you are aligned with the rest of the team that those are the topics you want to touch upon when talking to users.

A few examples of what these themes may look like:

"Why do people shop online?"

"How do people shop online?"

"For your customers, what is the difference between online and offline shopping?"

Break down your questions to make them answerable

The themes above sound similar, but there are fundamental differences between the topics each one is trying to uncover. Make sure you align with your team on the broader goal of research; this can save everyone tons of time later in the project.

The examples above are themes, and not the actual questions you would ask your users - if you did, you would get answers that are just too generic or vague. The next step is to break down, for each theme, the specific questions you want to ask your users:

From:
"Why do people shop online?"

To:
"What types of product do you buy online?"
"What types of product do you avoid buying online? Why?"
"What do you like the most and the least about the checkout process?"

Don't ask questions that will influence the answer

A common mistake when framing questions for the interview is to rush things out and try to get to the expected answers as quick as possible. When you walk in the room for an interview, there is a good chance you already have an idea about the answers users will give you - but don't let that intuition get in the way of extracting impartial, unbiased results.

From:
"How anxious do you feel when an online purchase can't be completed successfully?"

To:
"Try to remember the last time an online purchase couldn't be completed for some reason. How did you feel then?"

Ask about specific moments in the past

Answers become less generic and more accurate when user are thinking about a specific time in the past when that situation happened. They are more likely to give you more genuine and detailed answers - and they will try pretty hard to remember that specific occasion. Make sure your question is prompting that moment in the past:

From:
"What goes through your head when an online purchase fails?"

To:
"Tell me what went through your head the last time you tried to buy something online and the purchase failed."

Prioritize open-ended questions

Some users feel very comfortable in interviews, and will give you thorough and complete answers, even without too much prompt. But in some cases, users will answer only what is being asked. Not because they're lazy or mean, but just because different people have different personalities.

To avoid unproductive interview sessions (or sessions that will end too soon), make sure your questions are open-ended. Give users some room to elaborate their answers, as opposed to making super binary questions.

From:
"What was the last thing you bought online?"

To:
"Tell me about the last time you bought something online."

Starting the interview

You're finally walking into the room to start the interview, with your script in hands. It's time to meet the user and make sure they feel as comfortable as possible being interviewed - a situation that can make most people nervous. Here are some tips to break the ice before you get the questionnaire going.

Get into character

You're not the designer anymore. You are a researcher, who is overall very curious about how people behave online, and is particularly excited to hear that one story from that one user you are about to meet.

Take a few minutes before the interview to get into this new character. Breathe, stretch your facial muscles, and leave all the skepticism and attitude that are typical of designers outside of the room.

Keep the right posture

Your body language should reflect the fact you are sitting there to learn as much as possible from your user. Make eye contact, lean your body forward, don't cross your arms, and keep your facial expressions always positive - regardless of what you are hearing back from the users.

Most importantly: remember to smile. Smiling makes your voice and attitude seem friendlier, which will certainly make the user more comfortable and open to being honest on their answers.

Explain there's no right or wrong

This sounds a bit obvious, but it works every time: let your user know, right from the start, that there is no right or wrong answer. Make sure they understand you are not sitting there to test their ability to do something; you are testing your product's ability to be clear, useful and easy to use.

Start with warm-up questions

Start your session with simple, friendly, lightweight questions before diving deep into the topics you want to uncover. In general, these warm-up questions should be related to the broader theme of the session, but should not be too specific of elaborate.

"What do you do for a living?"

"Can you tell me about your hobbies?"

"How often do you use your computer at home?"

"How often do you buy things online?"

During the interview

You are on a roll, now. Hopefully at this point the interview is flowing quite nicely, you are following the script you had originally set up, and are also able to adapt the questions according to the direction the conversation is heading. Now here are some tips to make sure you can keep the momentum going.

Don't try to sell your product

You are running the research study to gather people's honest feedback about your product, not to convince them that your product is the best thing they have ever tried. Don't even try.

Control your reactions

Make sure you control your reactions, even when receiving negative feedback about something you are passionate about. If users sense you are being defensive about the feedback they are giving, they will stop giving you honest answers - which can defeat the purpose of doing user research in the first place.

Give yourself time to listen

You should not be doing most of the talking. Ask your question and quickly stop talking, so that users can actually answer it. There might be an awkward moment of silence (and an impulse from your side to fill that up), but shhh.

Paraphrase what you heard

You are meeting that person for the first time, so communication will be hard at the beginning. Every time you gather a new insight from the participant, take the time to summarize it and repeat it back to them. This will give them a chance to either confirm or clarify, and will keep you from going the wrong direction later in the interview.

Answer questions with questions

It's natural that participants get stuck, especially if you are leading a usability test where they are asked to complete a certain task using your product. They will ask you questions ("Should I click here?"), but resist the temptation of giving them the answer. Instead, answer with another question:

"Where would you click in this case?"

"How do you think that would work?"

"How might you get assistance to figure this out?"

Watch out for non-verbal clues

Pay attention to facial expressions, body language and tone of voice. A lot of the feedback users give come in a non-verbal way. That awkward frowny face users do while browsing your website probably means they have a question and don't feel comfortable asking. Ask them what it is.

A continuous learning process

Running user interviews, like any other skill, only gets better with time. You have to try and fail, try and fail - several times - until you get the right confidence to get things going more fluidly. Hopefully the tips above will give you a head start.

# data[].attributes.attachment_link.title
Asking the right questions during user research, interviews and testing

# data[].attributes.attachment_link.description
Interviewing users is an art - whether you are running usability testing, focus groups, ethnographic research or whatnot. Here are some good practices for asking users the right questions, and asking the questions the right way. Interviewing users require a lot of effort and planning.

# data[].attributes.attachment_link.readable_text
7 secrets of writing successful microcopy in 2018 will be introduced here for you to enhance UX in your web/mobile app designs.

In these days, besides rich functions, the words/texts (also professionally called " Microcopy") of a web/app contribute a lot to improving user experience. Any word, label or sentence on an app/web interface always matters. That's why a growing number of companies start to hire UX writers and let them specialize in text/microcopy design/research to enhance UX.

As a UX designer or UX writer, you've already realized the importance of words or witnessed the magic of microcopy, but, don't know how to make your microcopy outstanding and successful? Or really want to know some practical principles/guidelines to write short, clear, informative and enticing microcopy for better user experience, higher conversation rates and product sales?

To help you out, we'd love to share 7 secrets of writing successful microcopy for you to improve UX:

First, what is microcopy?

Before we start to learn the tips of making an outstanding microcopy, you should firstly know what microcopy really is. Generally speaking, the microcopy of a web/mobile app often indicates a cluster of words/texts/copies on a page to instruct and alleviate the concerns of users. It often includes the labels of a button or option, privacy and security notes, terms and conditions, warning notifications and more instructions shown on your apps. So, in this aspect, it is indispensable for users to understand, learn and master a web/mobile app.

Why is microcopy so important?

Cannot help asking how come a small bit of words could be so important for a web/mobile app? OK! The answer is simple. A short, clear, informative and enticing microcopy helps designers improve user experience, increase conversion rates, sometimes even impresses users and let them remember the apps/products/brands clearly.

To be more specific, microcopy often plays various roles in a web/app:

1). Consulter

In daily use, people can easily check some instruction texts, such as the product/app instructions, privacy and security notes, terms and conditions, feature introductions, etc., to remove their usage problems and doubts. So, in this aspect, the app/web microcopy works as a consulter and help people use the app/web easier and faster.

2). Guider

Many app texts, such as the labels of a button, the words showing how to sign in/up or other guidelines, often deliver useful information and lead users to complete a task/operation with ease. So, in this aspect, microcopy is also used as a useful guider.
Microcopy can guide you to sign in successfully.
3). Comforter

As we know, warning, prompt or error messages are indispensable for a web/mobile app. And an error message with well-crafted microcopy not only comforts users, removes their worries/doubts and also reduces frustration/negative emotions of them effectively. So, microcopy is also the very front comforter when users have some worries, doubts or problems while using an app/web.

4). Promoter

And some labels of CTA buttons, product instructions or feature descriptions, also introduce a product clearly, impress user and entice them to purchase. So, in this aspect, microcopy is also an excellent product promoter.
Microcopy can also introduce product/app features and stimulate users to purchase.
In a word, an outstanding and enticing microcopy always contributes a lot to enhancing UX, increasing product sales and standing out an app.

Microcopy is so important to enhance UX and competitiveness of a web/mobile app. How can you make your microcopy outstanding and appealing for better UX as a UX designer/writer? Here are 7 secrets and best microcopy examples (some of them are made by an easier, faster and smarter prototyping tool, Mockplus ) for you to learn:

1. Keep your microcopy simple and short

Nowadays, texts in an app/web are increasingly important to guide users and achieve interaction with users. However, that does not mean the longer your microcopy is, the greater it will impact on users. Honestly, most users do not really read all shown words literally as you wish. Hence, in order to increase the chances that users will read them or understand the meanings behind quickly even at a glance, it is always better to keep your microcopy simple and short.

For example, you can try to simplify your microcopy with the following methods:
*Make your microcopy short and light
To improve the user experience with excellent microcopy, the first thing you are supposed to do is to shorten and lighten your interface texts. Moreover, the best way is to write all contents down, and then, appropriately integrate, delete and replace some words based on different needs and scenarios. And at last, shorten your microcopy to the best state.
Shorten and lighten your words to make them simple and intuitive. *Use lists or subtitles
When the interface words cannot be shortened any longer, it is better to use lists or subtitles to simplify your microcopy.
In comparison with the whole paragraph in Picture 1, the microcopy with lists in picture 2 and the text with subtitles in picture 3 are far more intuitive and easier for users to understand the actual meanings of them quickly. *Add links to simplify your microcopy
The microcopy of a web/mobile app does not have to include all contents. In actual designs, you can easily add links (this is also called " Progressive Disclosure " design technique that is widely used by UX/UI designers) to simplify your texts. The users can easily click the linked words to jump to other pages and read more details.
Add links to make your microcopy short and light. Please Note: Never make your text too light
Simplifying your microcopy does not mean to blindly reduce the text words. Oppositely, your microcopy is supposed to deliver the most informative and complete contents with the least numbers of words. So, shorten your microcopy and also make it clear to avoid any ambiguous or incomprehensible situations.

2. Optimize your microcopy in combination with product/app/brand features

While designing your microcopy, you are also supposed to combine the product/app/brand features to make it unique. Moreover, this will also be an effective way to increase the popularity of the product/app/brand.

For example, in your design, you can try to add some words/sentences to introduce the special services/features of your products/apps, use special terms/phrases or choose special styles, color schemes or interactions based on product/app/brand features, etc. These ways always work to impress users and make them remember the product/app/brand well.
Design your microcopy in combination with product/app/brand features.
3. Customize your microcopy based on different scenarios

Microcopy works a lot to enhance UX of a web/mobile app. And you do not have to design every interface text with the same standards. Actually, it is often better for you to customize your microcopy based on different scenarios.

For example, if you want to design excellent labels for CTA buttons, except making them simple and light, in order to get higher click rate, it is better to make them distinctive and enticing by adding smart and eye-catching interactions.(Click to check 10 common mistakes when designers create website buttons )
Add proper interactions to make your buttons eye-catching and entice more users to click.
When it comes to some error or warning messages, it is also highly recommended for you to use some humanistic expressions to reduce frustration of users and improve user experience. ( Click to check 14 most creative 404 error page designs )
Add humanistic expressions to achieve emotional interactions with users.
And as with some information interfaces that need users to fill some personal information, including "Sign In", "Sign Up", "Contact" or "User Profile" pages of a web/app, you'd better add some words/sentences to remove doubts/worries of users.
Microcopy helps remove doubts/worries of users and encourage them to sign up safely.
4. Make your microcopy different

Microcopy is not supposed to be designed in the same way. Instead, it should be regarded as an important platform to show your personality and creativity.

Hence, you can try to make your microcopy different in the following aspects:
*Improve your microcopy with imagination
You can also improve your microcopy with imaginations. For example, It is usually a good try to use your microcopy to tell a story, illustrate the culture of a product/enterprise or present a special local/ethnic feature, etc. This can make your microcopy far more attractive.
Use microcopy to tell an interesting story. *Make your microcopy different with humor
Humorous or funny words/expressions/jokes not only attract users effectively, but also enable users to know/learn something more naturally and enjoyably.
Use humor to improve your microcopy. Please Note: Be careful with funny jokes/humorous texts
Humor is not suitable for all cases. Why? A humorous microcopy can make it easier for users to accept the sudden error or warning messages. While, it will also make a privacy and security note less convincing. Hence, you are supposed to be careful with funny jokes or humorous texts.
*Pair your microcopy with photos
As the old saying goes, "a picture speaks a thousand words". In order to make your microcopy outstanding and convincing, you can also try to use words and photos together.
Use photos to illustrate your microcopy more intuitively.
And in such situations, to add some texts with photos, you can try to download and use Mockplus, which allows users to easily pair their texts with photos by using "Image" and "Label"/"Text Area" components together. Moreover, it also offers easier and faster solutions for designers to add dynamic photos, import Sketch or static photos in batches. Of course, if necessary, you can also use its " Repeater " feature to add such "text + photo" pairs in batches with simple clicks.
*Show your unique style in microcopy designs
Each designer has his own design style/tone to make a microcopy for a web/mobile app. In your design, you'd better show your unique design style/tone to make your microcopy unique and distinctive. This is a really useful way to attract and impress users.

In a word, the microcopy designs created with creativity and sincerity of designers is doomed to be different and appealing to users.

5. Improve your microcopy with visual elements

Except making your microcopy simple and different, you are also supposed to improve it with some visual elements. The visual elements, such as colors, fonts, sizes and interactions of the interface texts, are always attractive for users.

Here are several clues for you to improve your microcopy in visualized ways:
*Adjust the properties of texts to present its hierarchy/importance relations
Many properties of the interface microcopy can be used to present its hierarchy/importance relations, such as the colors, fonts, sizes, background photos/colors and more. Moreover, strong contrasts of these mentioned properties could also work much better.

In short, set, adjust or contrast the properties of your microcopy to show its hierarchy/importance relations. This is also helpful to make it easier for users to get the useful information quickly.

In addition, while using Mockplus, a powerful prototyping tool, you can freely adjust or contrast the properties of an interface text easily by using its "Label" or "Text Area" components.
*Add proper interactions or animations for your microcopy
Smart interactions or animations can make your microcopy interesting and enticing. So, add proper interactions/animations to your microcopy for more pleasant user experience.

Take Mockplus as an example. You can easily add loading, clicking, long clicking and more interaction effects (especially the hovering effects ) with simple drag-and-drop.

It also offers many powerful interaction commands to enrich your microcopy designs, such as "Show/Hide", "Move", "Zoom", "Rotate", "Resize", "Set Color", "Set Text", "Set Text Color" and more.

In short, proper interactions are also effective for you to make your microcopy different in a visualized way.

6. Keep your microcopy consistent

To help users understand and master your web/mobile apps easily, it is better to keep all interface texts consistent. And the consistency of your microcopy can be reflected in following aspects:
*Use consistent appellations
Muddled appellations in an interface text often make the entire microcopy complicated and confuse the readers. Hence, you'd better use consistent appellations in your microcopy designs.
Please Note: Use "You" instead of "He", "She", "It" or "They"
Moreover, in comparison with using "He", "She", "It" or "They" in your designs, "You" is often more acceptable for readers and helps you communicate with them more naturally.
*Use consistent tenses
In your text designs, it is highly recommended to use consistent tenses. Moreover, the active voice is much better to arouse users' resonance than the passive voice. It is just like having a direct talk with them. Overall, keep your microcopy consistent in tenses.
*Keep your words consistent
In comparison with using completely new, ambiguous or obscure words/terms, directly reusing the words that you've used before in your microcopy designs is more acceptable and understandable for users. So, keep your words consistent.
*Use consistent themes and color schemes
The themes and color schemes of your microcopy also should be in accordance with the themes and colors of your entire web/mobile apps.
*Use consistent design style/tone
Each UX writer/designer writes their microcopy with a unique style/tone. That's normal. However, in case of any messy situations, it is better to keep your design style/tone consistent in your actual designs. No matter which design style/tone you choose, such as simple, humorous, formal or informal design style or tone, always keep it consistent in the entire web/app design.
Keep your microcopy consistent in color schemes, theme and design style.
In addition, in this aspect, in order to keep your microcopy consistent easily, Mockplus with powerful Component Style, component and icon libraries is really worth trying.

Take its Component Style library as an example, you can freely save, reuse and share the styles (such as colors, text fonts, sizes, alignment, etc) of your used components to keep your microcopy consistent in colors, theme, style or more.

7.Test and iterate your microcopy in an app prototype

Like other elements of a web/mobile app, microcopy is also supposed to be tested and edited in a real app prototype over and over again. To be more specific, you'd better test and adjust the length, color, alignment, size, font, style and interaction of your microcopy in a real app prototype to see whether it works as you wish.

And in this aspect, we have to mention Mockplus again for its 8 ways to test and share prototypes. With these 8 ways, you can easily test the feasibility of your microcopy designs, and also collect feedback from users and designers to iterate your designs quickly. So, Mockplus is really an excellent prototyping tool for you to optimize your microcopy with ease and efficiency.

In a word, a creative and appealing microcopy not only improves user experience, but also enhance the competitiveness of your web/mobile apps easily. So, you'd better always pay much attention to the microcopy designs of your apps.

Wrap Up

The microcopy designs of an app/web play a really important role in improving user experience. However, they can work well as you wish only when you put it back to a real web/app or prototype. Therefore, in order to improve UX and enhance the competitiveness of your app/web, you'd better also pay more attention to strengthening and enriching the features and functions of your app/web. Of course, a right prototyping tool, like Mockplus, is also your best choice to make, test and iterate your app/web designs.

Overall, it is always good for you to take every detail seriously in your app/web designs.

Hope this article with 7 secrets of writing successful microcopy will be helpful for you to work out an outstanding microcopy.

# data[].attributes.attachment_link.title
7 Secrets to Write Successful Microcopy for Better UX in 2018

# data[].attributes.attachment_link.description
7 secrets of writing successful microcopy in 2018 will be introduced here for you to enhance UX in your web/mobile app designs. In these days, besides rich functions, the words/texts (also professionally called " Microcopy") of a web/app contribute a lot to improving user experience.

# data[].attributes.attachment_link.title
Journey: UX stories about the amazing ride of being a designer

# data[].attributes.attachment_link.description
UX stories about the amazing journey of being a designer - and the things you learn along the way.

# data[].attributes.attachment_link.readable_text
It's hard to write a general article about application design mistakes because the very worst mistakes are domain-specific and idiosyncratic. Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.

Any of these three mistakes will doom your app, and yet I still can't tell you what to do. What's the right problem? What are the right features? What complicating curlicues can safely be cut from those features? For each domain and user category, these questions have specific and very different answers.

The only generalizable advice is this: rather than rely on your own best guesses, base your decisions on user research:

Conduct field studies and task analysis before deciding what your app should do.

Paper prototype your initial ideas before doing any detailed design - and definitely before wasting resources implementing something you'd have to change as soon as you get user feedback.

Design iteratively, conducting many rounds of quick user testing as you refine your features.

Of course, people don't want to hear me say that they need to test their UI. And they definitely don't want to hear that they have to actually move their precious butts to a customer location to watch real people do the work the application is supposed to support.

The general idea seems to be that real programmers can't be let out of their cages. My view is just the opposite: no one should be allowed to work on an application unless they've spent a day observing a few end users.

(Whatever you do, at least promise me this: Don't just implement feature requests from "user representatives" or "business analysts." The most common way to get usability wrong is to listen to what users say rather than actually watching what they do . Requirement specifications are always wrong. You must prototype the requirements quickly and show users something concrete to find out what they really need.)

All that said, there are still plenty of general guidelines for application UIs - so many, in fact, that we have a hard time cramming the most important into our two-day course. Here's my list of 10 usability violations that are both particularly egregious and often seen in a wide variety of applications.

1. Non-Standard GUI Controls

Basic GUI widgets - command links and buttons, radio buttons and checkboxes, scrollbars, close boxes, and so on - are the lexical units that form dialog design's vocabulary. If you change the appearance or behavior of these units, it's like suddenly injecting foreign words into a natural-language communication. Det vil gøre læserne forvirrede (or, to revert to English: Doing so will confuse readers).

For some reason, homemade design's most common victims are scrollbars. For years, we've encountered non-standard scrollbars in our studies, and they almost always cause users to overlook some of their options. We're seeing this again this year, in the studies we're conducting to update our course on Fundamental Guidelines for Web Usability. (The linked article includes screenshots of offending scroll controls.)

Some of the world's best interaction designers have refined the standard look-and-feel of GUI controls over 30 years, supported by thousands of user-testing hours. It's unlikely that you'll invent a better button over the weekend.

But even if your homemade design, seen in isolation, were hypothetically better than the standard, it's never seen in isolation in the real world. Your dialog controls will be used by people with years of experience operating standard GUIs.

If Jakob's Law is " users spend most of their time on other websites," then Jakob's Second Law is even more critical: "Users have several thousand times more experience with standard GUI controls than with any individual new design."

Users will most likely fail if you deviate from expectations on something as basic as the controls to operate a UI. And, even if they don't fail, they'll expend substantial brainpower trying to operate something that shouldn't require a second thought. Users' cognitive resources are better spent understanding how your application's features can help them achieve their goals.

1.a. Looking Like a GUI Control Without Being One

The opposite problem - having something that looks like a GUI control when it isn't one - can reduce usability even more. We often see text and headlines that look like links (by being colored or underlined, for example) but aren't clickable. When users click these look-alikes and nothing happens, they think the site is broken. (So please comply with guidelines for visualizing links.)

A similar problem occurs when something looks like a button but doesn't initiate an action , or looks like a radio button but isn't a choice. We found an example of this in our current round of studies.

To design a custom-tailored shirt on Liste Rouge Paris, you must provide your measurements. As the following screenshot shows, there are two different paths through the application here, depending on whether your measurements are already on file with the tailor.

Our test user clicked incessantly on the New Customer button to indicate that he was indeed a new customer. Unfortunately, this screen element was not a button at all, but rather a non-clickable heading.

He was the only user to test this site because he encountered it during a task in which users could choose a site to visit (usually from a search listing). In this case, the user eventually overcame the confusion and proceeded to enter his measurements. If we had tested more users, a small percentage would have likely failed at this point. Each small error in dialog design reduces usage only by a small amount, but most UIs contain bundles of errors, and the number of lost customers adds up.

As an aside, this screen also uses radio buttons incorrectly. In theory, all five choices are mutually exclusive, which does call for radio buttons. But in the user's mental model of the workflow, there are actually two issues here: (a) new vs. old customers, and (b) how to provide the measurements for your situation. You should use a single set of radio buttons only when users will choose between options for a single issue.

So, in the case above, a better design would first ask users to decide the new/existing customer question, and then reveal the relevant radio buttons for the option they choose.

2. Inconsistency

Non-standard GUI controls are a special case of the general problem of inconsistent design.

Confusion results when applications use different words or commands for the same thing, or when they use the same word for multiple concepts in different parts of the application. Similarly, users are confused when things move around, violating display inertia.

Using the same name for the same thing in the same place makes things easy.

Remember the double-D rule: differences are difficult.

Another example from our current study: Expedia pops up a two-month calendar view when users specify the departure or return date for a trip. The composite screenshot below was taken in February and shows what happens when you want to book a trip that starts on March 10 and ends on March 15.

In the second pop-up, the month of March has moved to the left, leaving room for April to appear on the right. This may seem like a convenient shortcut, since there's no way the user would want a February return date when traveling out in March.

In reality, however, the user is looking for March 15 in the same spot where it appeared in the first pop-up calendar: in the right-most column.

In our testing, the inconsistent placement of the months in the second pop-up caused confusion and delays, but users ultimately figured it out. We tested only a few users with this site, but if you observe this kind of almost-miss error in user testing, it's usually a sign that a few users will make the mistake for real during actual use.

Booking the wrong return date can have disastrous consequences - customers could arrive at the airport without a ticket for their expected flight. If a site has good confirmation emails, users might discover the problem before departure, but even that will cause aggravation and expensive customer support calls to resolve the situation.

Even if people eventually use the calendar correctly, it takes more time to ponder the inconsistent design than the time users save by not having to click the next-month button for April departures.

The shortcut that moves the months around saves time only for very frequent users who learn how to efficiently operate this part of the UI. So, an application for professional travel agents should probably use Expedia's calendar design. A site targeting average consumers should not.

3. No Perceived Affordance

"Affordance" means what you can do to an object. For example, a checkbox affords turning on and off, and a slider affords moving up or down. " Perceived affordances" are actions you understand just by looking at the object, before you start using it (or feeling it, if it's a physical device rather than an on-screen UI element). All of this is discussed in Don Norman's book The Design of Everyday Things.

Perceived affordances are especially important in UI design, because all screen pixels afford clicking - even though nothing usually happens if you click. There are so many visible things on a computer screen that users don't have time for a mine sweeping game, clicking around hoping to find something actionable. (Exception: small children sometimes like to explore screens by clicking around.)

Drag-and-drop designs are often the worst offenders when it's not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.) In contrast, simple checkboxes and command buttons usually make it painfully obvious what you can click.

Common symptoms of the lack of perceived affordances are:

Users say, "What do I do here?"

Users don't go near a feature that would help them.

A profusion of screen text tries to overcome these two problems. (Even worse are verbose, multi-stage instructions that disappear after you perform the first of several actions.)

When I tested some of the first Macintosh applications in the mid-1980s, users were often stumped by the empty screen that appeared when they launched, say, MacWrite. What do I do here , indeed. The first step was supposed to be to create a new document, but that command was not shown anywhere in the otherwise highly visible Macintosh UI unless you happened to pull down the File menu. Later application releases opened up with a blank document on the screen, complete with an inviting, blinking insertion point that provided the perceived affordance for "start typing."

3.a. Tiny Click Targets

An associated problem here is click targets that are so small that users miss and click outside the active area. Even if they originally perceived the associated affordance correctly, users often change their mind and start believing that something isn't actionable because they think they clicked it and nothing happened.

(Small click zones are a particular problem for old users and users with motor skill disabilities.)

4. No Feedback

One of the most basic guidelines for improving a dialog's usability is to provide feedback:

Show users the system's current state.

Tell users how their commands have been interpreted.

Tell users what's happening.

Sites that keep quiet leave users guessing. Often, they guess wrong.

(For an example of the problems with poor feedback, see the screenshot of VW's car configurator toward the bottom of my recent article reporting on our current round of testing: Because users couldn't tell which tire was selected, they had trouble designing their preferred car.)

4.a. Out to Lunch Without a Progress Indicator

A variant on lack of feedback is when a system fails to notify users that it's taking a long time to complete an action. Users often think that the application is broken, or they start clicking on new actions.

If you can't meet the recommended response time limits, say so, and keep users informed about what's going on:

If a command takes more than 1 second, show the "busy" cursor. This tells users to hold their horses and not click on anything else until the normal cursor returns.

If a command takes more than 10 seconds, put up an explicit progress bar, preferably as a percent-done indicator (unless you truly can't predict how much work is left until the operation is done).

5. Bad Error Messages

Error messages are a special form of feedback: they tell users that something has gone wrong. We've known the guidelines for error messages for almost 30 years, and yet many applications still violate them.

The most common guideline violation is when an error message simply says something is wrong, without explaining why and how the user can fix the problem. Such messages leave users stranded.

Informative error messages not only help users fix their current problems, they can also serve as a teachable moment. Typically, users won't invest time in reading and learning about features, but they will spend the time to understand an error situation if you explain it clearly, because they want to overcome the error.

On the Web, there's a second common problem with error messages: people overlook them on most Web pages because they're buried in masses of junk. Obviously, having simpler pages is one way to alleviate this problem, but it's also necessary to make error messages more prominent in Web-based UIs.

6. Asking for the Same Info Twice

Users shouldn't have to enter the same information more than once. After all, computers are pretty good at remembering data. The only reason users have to repeat themselves is because programmers get lazy and don't transfer the answers from one part of the app to another.

7. No Default Values

Defaults help users in many ways. Most importantly, defaults can:

speed up the interaction by freeing users from having to specify a value if the default is acceptable;

teach, by example, the type of answer that is appropriate for the question; and

direct novice users toward a safe or common outcome, by letting them accept the default if they don't know what else to do.

Because I used Liste Rouge Paris as a bad example under Mistake #1a, I thought I'd play nice and use them as a good example here. The tailor offers 15 different collar styles (among many other options) for people ordering custom-designed shirts. Luckily, they also provide good defaults for each of the many choices. In testing, this proved helpful to our first-time user, because the defaults steered him toward the most common or appropriate options when he didn't have a particular preference.

Dialog to specify your shirt's collar on www.listerouge-paris.com (3 of 15 styles shown).

8. Dumping Users into the App

Most Web-based applications are ephemeral applications that users encounter as a by-product of their surfing. Even if users deliberately seek out a new app, they often approach it without a conceptual model of how it works. People don't know the workflow or the steps, they don't know the expected outcome, and they don't know the basic concepts that they'll be manipulating.

For traditional applications, this is less of a problem. Even if someone has never used PowerPoint, they've probably seen a slide presentation. Thus, a new PowerPoint user will typically have at least a bare-bones understanding of the application before double-clicking the icon for the first time.

For mission-critical applications, you can often assume that most users have tried the app many times before. You can also often assume that new users will get some training before seeing the UI on their own. At the minimum, they'll usually have nearby colleagues who can give them a few pointers on the basics. And a good boss will give new hires some background info as to why they're being asked to use the application and what they're supposed to accomplish with it.

Sadly, none of these aides to understanding apply for most Web-based applications. They don't even apply for many ephemeral intranet applications.

Usability suffers when users are dumped directly into an application's guts without any set-up to give them an idea of what's going to happen. Unfortunately, most users won't read a lot of upfront instructions, so you might have to offer them in a short bulleted list or through a single image that lets them grok the application's main point in one view.

As an example, our test user who was trying to order a custom-tailored shirt was highly confused when the first screen in Hamilton Shirts' "Create Your Shirt" process displayed a fully designed shirt with an "Add to Bag" button. This screen mixed two metaphors: a configurator and an e-commerce product screen.

This is a case where a default value isn't helpful: people who want to design their own shirt are unlikely to want to buy a pre-designed shirt on the first screen.

(This screen also suffers from Mistake #1: non-standard GUI controls. In addition to its non-standard drop-down selection menus in a tabbed dialog that doesn't look enough like tabs, the screen has a non-standard way of paging through additional fabric swatches. Users are less likely to understand how to select fabrics when the controls are presented in this manner.)

Our test user never understood the process of designing his own shirt on this site and ultimately took his business elsewhere.

9. Not Indicating How Info Will Be Used

The worst instance of forcing users through a workflow without making the outcome clear is worth singling out as a separate mistake: Asking users to enter information without telling them what you'll use it for.

A classic example is the "nickname" field in the registration process for a bulletin board application. Many users don't realize the nickname will be used to identify them in their postings for the rest of eternity - so they often enter something inappropriate.

As another example, we once tested an e-commerce site that smacked users with a demand for their ZIP code before they could view product pages. This was a big turn-off and many users left the site due to privacy concerns. People hate snoopy sites. An alternative design worked much better: It explained that the site needed to know the user's location so it could state shipping charges for the very heavy products in question.

10. System-Centric Features

Too many applications expose their dirty laundry, offering features that reflect the system's internal view of the data rather than users' understanding of the problem space.

In our current study, one user wanted to reallocate her retirement savings among various investments offered by her company's plan (for example, to invest more in bonds and less in stocks). She thought she did this correctly, but in fact she had changed only the allocation of future additions to her retirement account. Her existing investments remained unchanged.

As far as the mutual funds company is concerned, new investments and current investments are treated differently. Reallocating future additions means changing the funds they'll buy when the employer transfers money into the account. Reallocating current investments means selling some of the holdings in existing mutual funds and using the proceeds to buy into other funds.

The key insights here?

Our test user didn't have this distinction between new and old money; she simply wanted her retirement savings allocated according to her revised investment strategy.

Even users who understand the distinction between new and old money might prefer to treat their retirement savings as a single unit rather than make separate decisions (and issue separate commands) for the new and old money.

It would probably be better to offer a prominent feature for changing the entire account's allocation, and use progressive disclosure to reveal expert settings for users who want to make the more detailed distinction between the two classes of money.

Bonus Mistake: Reset Button on Web Forms

This mistake relates to Web forms, but because so many applications are rich in forms, I'll mention it here: It's almost always wrong to have a Reset button on a Web form.

The reset button clears the user's entire input and returns the form to its pristine state. Users would want that only if they're repeatedly completing the same form with completely different data, which almost never happens on websites. (Call center operators are a different matter.)

Making it easy for users to destroy their work in a single click violates one of the most basic usability principles, which is to respect and protect the user's work at almost any cost. (That's why you need confirmation dialogs for the most destructive actions.)

# data[].attributes.attachment_link.description
It's hard to write a general article about application design mistakes because the very worst mistakes are domain-specific and idiosyncratic. Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.

# data[].attributes.attachment_link.title
Talks from Interaction 18 available online - UX Collective

# data[].attributes.attachment_link.description
Interaction 18, probably the largest and most renowned UX conference in the world, took place between February 3 and 8 in Lyon, France. Good news is: the Interaction Design Association (IxDA) has...

# data[].attributes.attachment_link.readable_text
Understanding the physical, environmental, emotional and mental state of the user at the moment of the interaction.

Through my research project on how to defuse negative self-talk I found that tools as personas and empathy maps were missing something between the design part of the project. While they were useful for the creation of journey maps, they lack the contextual relevance through the later stages of design.

Looking at different way to use the gathered information about the users and the missing pieces, I designed a new tool, called interaction persona. The tool focuses on the users and their environment in the moment of the interaction with a product or service.

Interactions personas help to understand and empathise with the user's mental state and understand the context in which the user interacts with a product or a service. Since it is known that the cognitive load, emotions and environment influence people's behaviours and attention span, it is important to understand in which situation the interaction occurs to formulate an informed decision on the interface, data input approach, and information system.

What makes it different from personas and empathy maps?

Starting from the data gathered in user interviews and primary research, personas and empathy maps help teams to empathise with the user, in particular while analysing the entire journey of the user in a given product or service. While persona and empathy maps describe a general state of the user, they lack of details in the touchpoints, when the interaction between the users and the product or services.

Interaction personas focus instead on the touchpoints and the user's mental state and context in these specific moments, pinpointing crucial elements that could help improving the product.

Interaction personas take the knowledge on cognitive and behavioural psychology and focus on six elements: emotional state, environment, willpower and mental energy, attention span, touchpoints, moment visualisation, and inclusion.

A brief look at behavioural theories

Interaction personas help to create an overview of the variables that can influence behaviors to happen.

The Fogg Behavior Model, a model that look at how and when behaviours occur, shows that there are three elements that must converge at the same moment for let it happens: Motivation, Ability, and Trigger.

Interaction personas help to understand the user context in the moment of the interaction and to consider all the elements that could influence user motivation and ability to take an action.

Moreover, Interaction personas help to look at what could be an internal and external triggers in that specific moment. Internal triggers are driven by emotions and beliefs, other people and our memory. External triggers, on the other hand, are informations or cue in our environment that lead us to take actions.

Once collected in the same places these informations will be easy to understand for designers, and to them to define a specific moment and design a better interaction.

How to use interaction personas.

Interaction personas come into play after having created the journey map and identified touch points and opportunities.

You can develop single or multiples interaction personas depending on the journey map. It is important to base the data on the information gathered during the primary research and not let assumptions bias the process.

As mentioned before, interaction personas focus on six elements: emotional state, environment, willpower and mental energy, attention span, touchpoints, moment visualisation, and inclusion.

Emotional state

What is the emotional state of the user at the moment of interaction with the product or service?

Looking at the users emotional state helps to understand how they will act and which emotion are triggering the interaction allowing us to reinforce or defuse such emotions.

Environment

How does the environment influence the product/service usage and the user?

Especially while interacting with a mobile device, environment is competing with users' attention. Can we use it in our advantage? Are there some way to use environment elements for trigger an action? These are the kind of things you need to take in consideration while designing products or services.

Willpower and mental energy

What level of mental energy does user have in the moment of interaction? What's the level of user's cognitive load?

A high cognitive load lower the willpower and the mental energy of the user impairing both motivations and ability to act; less mental space leads to lower abilities to get things done and to a higher stress perceptions during the interactions.

Attention span

Is the full attention of the user in the product? Is the user looking actively to what we are providing?

As Linda Stone writes in her article on continuous partial attention, "we pay continuous partial attention in an effort not to miss anything"; this influences our ability to actually get things done. By focusing on the available attention span in the moment you will be able to set clear constrains to facilitate less stress on the user during the interaction.

Touchpoints

What are the touchpoints for the interaction?

Think about all the possible scenarios and highlight all the touchpoints where the interaction could happen. Consider wearables, mobiles and tablets, in person interactions, desktop and TV or voice interaction through a call. Each touchpoint has its own pro and cons.

Look for inclusion

Have you looked at different people impairment?

Disabilities could be permanent or temporary and situational. Thinking of these situation will help to allow everyone interact with your product or service.

Visualise the moment

Draw a the situation of the interaction and try to tell a story about.

Look at the situation, imagine it and draw it. It doesn't need to be perfect but it is important in order to allow the entire team to fast visualise the interaction moment.

Conclusions

With the advent of Human-Centered design, people are put at the center of the design process. Understand the needs of the people we are designing for leads to the creation of a better solutions. Interaction personas bring the Human-Centered design approach in the interaction design, helping to understand and empathise with the people that will interact with our products or services.

# data[].attributes.attachment_link.title
Interaction personas: why, what, and how - UX Collective

# data[].attributes.attachment_link.description
Understanding the physical, environmental, emotional and mental state of the user at the moment of the interaction. Through my research project on how to defuse negative self-talk I found that tools as personas and empathy maps were missing something between the design part of the project.

# data[].attributes.attachment_link.readable_text
As we at the Wall Street Journal kick off a new round of hiring, I'm reminded of my least favorite practice in design hiring: the Exercise. Why do we put ourselves through it? Why do we put each other through it? What could we possibly gain from it? I'd like to hazard an answer these questions. I also have a strange idea of how to improve the exercise - more on that in a bit.

What is the Exercise?

Pretty much every design hiring process

The Exercise is one step in most organizations' design hiring process. It happens somewhere between interviews and a hiring decision. It usually comes in one of three flavors:

"Fix our product" - A designer asks the candidate to do their work for them.

"Fix someone else's product" - The candidate is asked to redesign a portion of an existing product. Since it's someone else's product, the candidate has no context or insight into why the product works the way it does. Alex Barashkov provided a strongly-worded send up on the shortcomings of such redesigns.

"Design an imaginary product" - The candidate is given a hypothetical brief, and designs a product from scratch. This has been my preferred Exercise in the past, but it has some major shortcomings.

Exercises can have a few different formats, too:

Take-home - The candidate is given a brief, then produces work on their own time, at their own pace. Sometimes, the brief suggests a given amount of time, but if the candidate is anything like me, they'll spend way more time on it than suggested.

Solo Whiteboard - The candidate is given a brief, then has to immediately produce work. A whiteboard is provided, along with one or two colors of markers. This format was adopted from engineering hiring practices, where it is loathed.

Collaborative Whiteboard - The candidate shares a whiteboard and a few markers with other designers from the company. Together, they're expected to produce some work. The candidate is usually not clear on who's who, and has to quickly work out team dynamics in addition to drawing/talking.

Why do companies run the Exercise?

Portfolios and résumés aren't enough: to make a good hiring decision, we need to see how a candidate works.

Engineers have tackled this problem with whiteboards (and, before those existed, pens and paper) for decades. Engineers have also engineered the heck out of hiring. They've scaled organizations quickly and found great talent (they've also produced some epic monocultures, but that's a different essay). My hunch is that design hiring has adopted a lot of engineering practices over the last few years, but we're still trying to figure out what works and what doesn't.

What do we have to gain from the Exercise?

During most of the hiring process, we talk about the inputs in outputs of work: past experience, portfolio highlights, etc. With a well-run design exercise, we can really dig into the process of design.

In exercises I've been a part of, things really click when the interviewer-interviewee relationship starts to blur. The good ones are improvisational; they engage the problem-solving parts of the brain. The active context of the Exercise can be a valuable look into day-to-day design thinking. Plus, it can be fun.

Why doesn't The Exercise work?

Comic by Andrew Hwang

The exercise usually fails to simulate real design work.

In the case of take-home exercises, everyone misses out on the unpredictable nature of day-to-day design work. With whiteboarding, we simulate a bizarre world where all design happens on whiteboards. No matter what, asking a candidate to solve problems out of context is setting them up for failure.

Also, if you're drawing on a whiteboard, you probably have your back to the person judging you. This isn't comfortable for anybody.

So what?

Should we care that design exercises don't simulate real design? Probably not. However, we should stop pretending that they do. Nobody does their best work in contrived circumstances.

So now, my really strange idea for better design exercises: instead of asking a candidate to design the best version of something, ask them to design the worst version of something.

Tentatively, let's call it a Bad Design Exercise. This is an awful name, but I think it is fitting with the spirit of this essay.

I think we can learn a lot about good design by thinking about bad design. To wit, a real-life Bad Design Exercise:

Really Bad Rubik's Cubes

By looking at some real-life "bad" Rubik's Cubes, we can learn a lot about the designers that made them.

Exhibit A: 7x7 Cube

7x7 cube from Alacube

I can't solve a regular Rubik's Cube. To me, this Rubik's Cube puts the allure of success even further out of reach.

Why is it bad? If all Rubik's Cubes were this complicated, very few people would ever pick one up.

What can we learn? If you've never seen these higher-order versions, you think of the Rubik's Cube as a classic symbol of a hard puzzle to solve. But we take that - and lots of design - for granted. The 7x7 cube is a good example of seeing the core identifying element of a thing, and taking that one (or four) steps further.

Exhibit B: 1x1 Cube

1x1 cube by Jaco Haasbroek

I Googled this thinking it was a ridiculous idea, but lo and behold, you can buy it. I can't figure out if it's always solved, or unsolvable.

Why is it bad? It takes all of the function out of the puzzle.

What can we learn? Often, we learn by subtracting. A good designer will know when to stop, and when to keep reducing. In this case, the designer knew what they were doing: it's obviously a Rubik's Cube, and obviously a really bad one.

Exhibit C: Color-changing stickers

Lenticular Rubik's Cube, solved by YouTube user RedKB

This cube's stickers are lenticular lenses. Depending on what angle you view it from, the stickers appear one of two different colors.

Why is it bad? Technically, you can solve it. But you'll never get all the stickers right at all angles.

What can we learn? This cube isn't harder, mechanically speaking, than the regular 3x3. However, it undermines a key assumption of Rubik's Cubes: that all faces of the cube are one and only one color. When designing, it's important to question even the most basic assumptions.

How to successfully run a Bad Design Exercise

A successful design exercise accomplishes three things. It:

1. Gives the candidate a platform to comfortably express themselves

2. Gives the reviewer an opportunity to ask questions about the candidate's process

3. Involves as little work as possible

To do all these things, a design exercise might look like this:

Step 1: Briefing

Set aside time to walk a candidate through the exercise. Share a written brief with them before this meeting, and encourage them to ask questions. Clearly communicate your expectations. Maybe send them this essay, too.

Step 2: Time Box

Explicitly limit the time the candidate can work on the exercise. In the past, I've done this by bookending the working time with the briefing and the review. Allow the candidate to work alone, uninterrupted, and make sure they have access to their preferred tools.

Step 3: Review

How do you conduct design reviews with your team? Run the same process with the candidate. Invite team members to participate, and use this review time as an opportunity to share your process with the candidate.

Step ∞: Have Fun, Embrace the Bad

It might seem impossible, but design exercises can be fun. Talking about bad design reduces the you vs. them friction of the interview process. And don't take the work too seriously; pressure and stress shut conversations and candidates down.

In conclusion, design exercises can be really awful, if you let them. Improving the exercise will save time and emotional energy on both the candidate and the hiring manager side. Better conversations about design can increase the likelihood of hiring the right candidate, and maybe even convince the right hire to join.

# data[].attributes.attachment_link.description
As we at the Wall Street Journal kick off a new round of hiring, I'm reminded of my least favorite practice in design hiring: the Exercise. Why do we put ourselves through it? Why do we put each other through it? What could we possibly gain from it?

# data[].attributes.attachment_link.readable_text
Meet Form-an intuitive, free wireframe kit that will help you hit the ground running with your next design project. With 190 layouts for 19 popular categories-plus desktop, mobile, and tablet formats-Form is suitable for kickstarting a wide range of design projects.

Here's what you'll find inside Form:

Bootstrap grid layout designed to maximize available space for each device format

190 templates, 19 categories, 10 layouts per category, and 200+ UI elements

6+ commonly-used components

10 ready-to-use styles for headers and footers

Fully editable and scalable

Text styles for easy editing

One free web font: Ubuntu

Desktop, mobile, and tablet formats

.SKETCH and .PSD file types

This free wireframe kit is ideal for creating beautiful, seamless, large-scale design projects, faster. Designers can pull from a massive library of readymade layouts, components, and symbols, allowing them to focus on what really matters: creating beautiful designs (rather than building repeatable processes from the ground up each time).

Ideal for creating beautiful, seamless, large-scale design projects, faster.

Form helps you create sleek prototypes to share with project stakeholders, and it's easy to pull your wireframes into InVision's Freehand to give a live presentation or collect interactive feedback. Discover how to instantly upload your Sketch and Photoshop files to Freehand via our free Craft plugin. This facilitates rapid prototyping so designers can test their ideas early on and iterate quickly.

Form includes a wide variety of layouts for popular page categories-from headers and footers to the pricing tables, blog post templates, feature pages, testimonials, FAQ, team pages, creative portfolios, and more. And the free wireframe kit comes with Ubuntu, a sophisticated web font, for easy editing. So, what will you create with Form?

Start making beautiful wireframes today

Want more free UI kits and components? Download our other high quality packs. Our kits have 550,000+ downloads.

# data[].attributes.attachment_link.title
Form: Free wireframe kit from InVision - InVision Blog

# data[].attributes.attachment_link.description
Meet Form-an intuitive, free wireframe kit that will help you hit the ground running with your next design project. With 190 layouts for 19 popular categories-plus desktop, mobile, and tablet formats-Form is suitable for kickstarting a wide range of design projects.

# data[].attributes.attachment_link.description
A community-driven effort to make web accessibility easier.

# data[].attributes.attachment_link.title
Page Flows - user flow design inspiration

# data[].attributes.attachment_link.description
See how top brands design their onboarding, upgrading, downgrading and other key user flows

# data[].attributes.attachment_link.readable_text
Error messages always mean well. But all too often, they're confusing, unclear, and leave you wondering what to do next. In this post, we'll highlight some of the worst error messages we've ever seen - and offer tips on how to make sure your errors never make these big mistakes.

Big tip o' the hat to the amazing Erika Hall for sparking the conversation I pulled these examples from.

Blame the user, obviously

One of my favorite characteristics of digital interfaces has got to be snark. Like, I just love it when an app has opinions on my cleverness, appearance, background, or ability to use interfaces.

All reports suggest that Twitter has obliviated this highly offensive bit of microcopy "wit," so don't go flame them.

Not for this, anyway.

Suggested revision for this error message
Tweets must be under 140 characters, including spaces.
Doesn't accuse me of lacking cleverness and it offers me a hint about something tangible I can do to tighten things up - namely, get rid of spaces.

Call me names, like ineligible or invalid

Ummmm ... pretty sure I am eligible to make that request, as I did indeed just make it.

Perhaps - and I'm just fishing here - you should have deftly guided me away from making said request, instead?

Also, identifying two possible causes of the error rather undercuts the big red assertion above. Whenever possible, narrow the cause down to one reality, and speak specifically to that.

Suggested revision for this error message

Without knowing what exactly the user was trying to do here, it's hard to suggest something different, but a generic revision could start with:
Sorry, due to your permission levels or a mistake on our part, you can't access that.
Be delightfully nonspecific

While this error certainly has brevity on its side, it's not what you'd call ... useful. Which is a key characteristic of a good error message.

Without specific details on what happened nor even a hint on what to do about it, I'm left in the dark, battling the yawning void of ennui that only the metaphysically inert "OK" button can adequately express.

‍Google Docs making a missing image rather alarming!

Give "too real" a chance

While I'm a huge fan of writing that remains beautifully meaningful with or without context, it's not the best recipe for an error message.

Nonspecific pronouns like this are all-too-open to misinterpretation - especially of the "this is my life rn" variety.

Anytime you're writing for the web - be it an error message or a blog post - take a close look at every instance of vague pronouns like it, this, and that and ask yourself if the whole experience wouldn't be clearer if you swapped in the thing in place of that.

Cancel my cancellation, I'd not like to not do that

Speaking of being specific with your people, places, and things: I present to you the classic case of cancelling your cancellation.

It's an all-too-common scenario in software product UIs. Person acts to cancel something, then decides they actually didn't want to cancel after all - meaning that both the desired action and the undo action can be described with the same word: cancel.

Suggested tactics for a revision of this error message

Thankfully, you've got some options:

1. Add specifics: For the desired action, say what you'll be cancelling. E.g., "Cancel this meeting" or "Cancel your order."

2. Use a cancel synonym: If your voice, tone, and audience allow for it, you can use a cancel alternative like "Never mind" for the undo action.

3. Use affirmative and/or negative language: Depending on how you phrase the rest of the modal, you can use "yes" and "no" in your confirm and undo actions, respectively. E.g., "Yes, cancel the meeting" and "No, keep the meeting."

Just fail

Every product designer, dev, and content strategist has run into the unfortunate case where something ... just went wrong. And it's really hard to pinpoint any single cause.

Suggested tactics for a revision of this error message

If you write for product, whatever your role might be, I'd encourage you to push back for more details in a situation like this. Depending on the answer, you might be able to come up with a more useful generalization - such as, "Hmm, it looks like you might not be connected to the internet."

Even if you can't generalize, it's possible there's a viable solution that will cover many of the unknown causes for the error, such as refreshing the page, clearing your cache, or troubleshooting your internet connection.

And if you can't usefully generalize, it might well be time to show a little humility.

The example from Pinterest above shows promise by starting off on the right foot: Sorry! But it's kinda downhill from there, as typing a username or email into a form field doesn't exactly equal a "request" from the user perspective.

Always make sure you're speaking the user's language - especially when it comes to a simple interaction like logging in. It's the small things that can really break a user experience.

Don't run it by QA

Looking at this lovely modal - ironically spotted in one of Adobe's few tools specifically for writers - I can't help but imagine the following scenario:
Engineer: Hey, Writer, what's our standard for error messages? Writer: Well, we explain what went wrong, and why. What's your specific error? Engineer: Failed save. Writer: Okay, then basically, "Cannot save X for reason Y." Engineer: Got it. Shipped. Writer: Cool! Thanks for checking.
Ah, office miscommunications that make their merry way into prod.

Suggested tactics for a revision of this error message

In this imaginary scenario, the writer was two-thirds right (if neglectful as far as explaining their variables goes). A good error message does explain what went wrong and why (when possible) - but a key third piece is to explain how to fix it. In some cases, the why will make the fix self-explanatory, but not always.

Why narrowcast when you can broadcast?

There's absolutely nothing like broadcasting a message meant for the few to everyone. That's what email's for, Google.

On the lighter side: if you're going to mock something, mock yourself

Since we started off with horrible user-shaming, it's only fitting to round things out with a positive example of self-shaming from a software company.

Here, the photo app subtly cops to the limitations of its facial recognition feature - probably not trained on dogs, to be fair - and gives you the option to make it try again with a pithy bit of self-mockery as CTA.

Well-played, folks. Well-played.

# data[].attributes.attachment_link.title
How not to write an error message | Webflow Blog

# data[].attributes.attachment_link.description
Error messages always mean well. But all too often, they're confusing, unclear, and leave you wondering what to do next. In this post, we'll highlight some of the worst error messages we've ever seen - and offer tips on how to make sure your errors never make these big mistakes.

# data[].attributes.attachment_link.readable_text
Illustration by Dougal MacPherson

by Published in Heleen van Nues , Design , Responsive Design , Process , Workflow & Tools Lennart Overkamp

No matter your role, if you've ever been involved in a digital design project, chances are you're familiar with wireframes. After all, they're among the most popular and widely used tools when designing websites, apps, dashboards, and other digital user interfaces.

But they do have their problems, and wireframes are so integrated into the accepted way of working that many don't consider those drawbacks. That's a shame, because the tool's downsides can seriously undermine user-centricity. Ever lose yourself in aesthetic details when you should have been talking about content and functionality? We have!

That's why we use an alternative that avoids the pitfalls of wireframes: the priority guide. It not only keeps our process user-centered and creates more valuable designs for our users (whether used alongside wireframes or as a direct replacement), it's also improved team engagement, collaboration, and design workflows.

The problem with wireframes

Wikipedia appropriately defines the wireframe as "a visual guide that represents the skeletal framework of a website. ... [It] depicts the page layout or arrangement of the website's content, including interface elements and navigational systems." In other words, wireframes are sketches that represent the potential website (or app) in a simplified way, including the placement and shape of any interface elements. They range from low-fidelity rough sketches on paper to high-fidelity colored, textual screens in a digital format.

Examples of low-fidelity (on the left) and high-fidelity (on the right) wireframes

Because of their visual nature, wireframes are great tools for sketching and exploring design ideas, as well as communicating those ideas to colleagues, clients, and stakeholders. And since they're so easy to create and adapt with tools such as Sketch or Balsamiq, you also have something to user test early in the design process, allowing usability issues to be addressed sooner than might otherwise be possible.

But although these are all valuable characteristics of wireframes, there are also some significant downsides.

The illusion of final design

Wireframes can provide the illusion that a design is final, or at least in a late stage of completion. Regardless of how carefully you explain to clients or stakeholders that these first concepts are just early explorations and not final-maybe you even decorated them with big "DRAFT" stickers-too often they'll still enthusiastically exclaim, "Looks good, let's start building!"

Killing creativity and engagement

At Mirabeau, we've noticed that wireframes tend to kill creativity. We primarily work in multidisciplinary teams consisting of (among others) interaction (UX) designers, visual designers, front-end developers, and functional testers. But once an interaction designer has created a wireframe, it's hard for many (we're not saying all) visual designers to think outside the boundaries set by that wireframe and challenge the ideas it contains. As a result, the final designs almost always resemble the wireframes. Their creativity impaired, the visual designers were essentially just coloring in the wireframes.

Undermining user-centricity

As professionals, we naturally care about how something looks and is presented. So much so that we can easily lose ourselves for hours in the fine details, such as alignment, sizing, coloring, and the like, even on rough wireframes intended only for internal use. Losing time means losing focus on what's valuable for your user: the content, the product offering, and the functionality.

Static, not responsive

A wireframe (even multiple wireframes) can't capture the responsive behavior that is so essential to modern web design. Even though digital design tools are catching up in efficiently designing for different screen sizes (here's hoping InVision Studio will deliver), each of the resulting wireframes is still just a static image.

Inconvenient for developers and functional testers

Developers and functional testers work with code, and a wireframe sketch or picture provides little functional information and isn't directly translatable into code (not yet, anyway). This lack of clarity around how the design should behave can lead to developers and testers making decisions about functionality or responsiveness without input from the designer, or having to frequently check with the designer to find out if a feature is working correctly. Perhaps less of a problem for a mature team or project where there's plenty of experience with, and knowledge of, the product, but all too often this (unnecessary) collaboration means more development work, a slower process, and wasted time.

To overcome these wireframe pitfalls, about five years ago we adopted priority guides. Our principal interaction designer, Paul Versteeg, brought the tool to Mirabeau, and we've been improving and fine-tuning our way of working with them ever since, with great results.

So what are priority guides?

As far as we know, credit for the invention of priority guides goes to Drew Clemens, who first introduced the concept in his article on the Smashing Magazine website in 2012. Since that time, however, it seems that priority guides have received little attention, either from the web and app design industry or within related education establishments.

Simply put, a priority guide contains content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications. The hierarchy is based on relevance to users, with the content most critical to satisfying user needs and supporting user (and company) goals higher up.

The format of a priority guide is not fixed: it can be digital (we personally prefer Sketch), or it can be physical, made with paper and Post-its. Most importantly, a priority guide is automatically content-first, with a strong focus on providing best value for users.

The core structure of a priority guide

Diving a bit deeper, the following example shows the exact same page as shown in the wireframe images presented earlier in this article. It consists of the title "Book a flight," real content (yes, even the required legal notice!), several sections of information, and annotations that explain components and functionality.

A detailed digital priority guide for an airline's flight overview page

When comparing the content to the high-fidelity wireframe, you'll notice that the order of the sections is not the same. The step indicator, for example, is shown at the bottom of the priority guide, as the designer decided it's not the most important information on the page. Conversely, the most important information-flight information and prices-is now placed near the top.

Annotations are an important part of priority guides, as they provide explanations of the functionalities and page behavior, name the component types, and link the priority guide of one page to the priority guides of other pages. In this example, you can find descriptions of what happens when a user interacts with a button or link, such as opening a layover screen to display flight details or loading a a flight selection page.

The advantages of priority guides

Of course, we can debate for hours whether the creator of, or team responsible for, the above priority guide has chosen the correct priorities and functionalities, but that goes beyond the scope of this article. Instead, let's name the main advantages that priority guides offer over wireframes.

Suitable for responsive design

Wireframes are static images, requiring multiple screenshots to cover the full spectrum from mobile to desktop. Priority guides, on the other hand, give an overview of content hierarchy regardless of screen size (assuming user goals remain the same on different devices). Ever since responsive design became standard practice within Mirabeau, priority guides have been an essential addition to our design toolkit.

Focused on solving problems and serving needs

When creating priority guides, you automatically focus on solving the users' problems, serving their needs, and supporting them to reach their goals. The interface is always filled with content that communicates a message or helps the user. By designing content-first, you're always focused on serving the user.

No time wasted on aesthetics and layout

There's no need for interaction designers to waste time on aesthetics and layout in the early phases of the design process. Priority guides help avoid the focus shifting away from the content and user toward specific layout elements too early, and keep us from falling into the "designer trap" of visual perfectionism.

Facilitating visual designers' creativity

Priority guides provide the opportunity for designers to explore extravagant ideas on how to best support and delight the user without visual boundaries set by interaction designers. Even when you're the only designer on your team, working as both interaction and visual designer, it's hard to move past how those first wireframes looked, even when confronted with new content.

Developers and testers get "HTML" early in the process

The structure of a priority guide is very similar to HTML, allowing the developer to start laying the groundwork for future development early on. Similarly, testers get a checklist for testing, allowing them to begin building those tests straight away. The result is early feedback on the feasibility of the designs, and we've found priority guides have significantly speeded up the collaborative process of design and development at Mirabeau.

How to create priority guides

There are a number of baselines and steps that we've found useful when creating priority guides. We've fine-tuned them over the years as we've applied this new approach to our projects, and conducted workshops explaining priority guides to the Dutch design community.

The baselines

Your priority guide should only contain real content that's relevant to the user. Lorem ipsum, or any other type of placeholder text, doesn't communicate how the page supports users in reaching their goals. Moreover, don't include any layout elements when making priority guides. Instead, include only content and functionality. Remember that a priority guide is never a deliverable-it's merely a tool to facilitate discussion among the designers, developers, testers, and stakeholders involved in the project.

Priority guides should always have a mobile format. By constraining yourself this way, you automatically think mobile-first and consider which information is most important (and so should be at the top of the screen). Also, since the menu is typically more or less the same on every screen of your website or app, we recommend leaving the menu out of your priority guide. It'll help you focus on the screen you're designing for, and the guide won't be cluttered with unnecessary distractions.

Step 1: determine the goal(s)

Before jumping to the solution, it's important to take a step back and consider why you're making this priority guide. What is the purpose of the page? What goal or goals does the user have? And what goal or goals does the business have? The answers to these questions will both guide your user research and determine which content will add more value to users and the business, and so have higher priority.

Step 2: research and understand the user

There are many methods for user research, and the method or methods chosen will largely depend on the situation and project. However, when creating priority guides, we've definitely found it useful to generate personas, affinity diagrams, and experience maps to help create a visual summary of any research findings.

Step 3: determine the content topics

The aim of this stage is to use your knowledge of the user and the business to determine which specific content and topics will best support their goals in each phase of the customer journey. Experience has taught us that co-creating this content outline with users, clients, copywriters, and stakeholders can be highly beneficial. The result is a list of topics that each page should contain.

Step 4: create a high-level priority guide

Use the list of topics to create a high-level priority guide. Which is the most important topic? Place that one on the top. Which is the second most important topic? That one goes below the first. It's a straightforward prioritization process that should be continued until all the (relevant) topics have found a place in the priority list. It's important to question the importance of each topic, not only in comparison to other topics, but also whether the topic should really be on the page at all. And we've found that starting on paper definitely helps avoid focusing too much on the little visual details, which can happen if using a digital design tool ("pixel-fixing").

A high-level priority guide for FreeBees, a fictional company

Step 5: create a detailed priority guide

Now it's time to start adding the details. For each topic, determine the detailed, real content that will appear on the page. Also, start thinking about any functionalities the page may need. When you have multiple priority guides for multiple pages, indicate how and where these pages are connected in a sitemap format.

We often use this first schematic shape of the product to identify flows, test if the concept is complete, and determine whether the current content and priorities effectively serve users' needs and help solve their problems. More than once it has allowed us to identify that a content plan needed to be altered to achieve the outcome we were targeting. And because priority guides are quick and easy to produce, iterating at this stage saved a lot of time and effort.

A detailed priority guide for FreeBees, a fictional company

Step 6: user testing and (further) iteration

The last (continuous) step involves testing and iterating your priority guides. Ask users what they think about the information presented in the priority guides (yes, it is possible to do usability testing with priority guides!), and gather feedback from stakeholders. The input gained from these sessions can then be used to validate and reprioritize the information, and to add or adapt functionalities, followed by further testing as needed.

Find out what works for you

Over the years we've seen many variations on the process described above. Some designers work entirely with paper and Post-its, while others prefer to create priority guides in a digital design tool from scratch. Some go no further than high-level priority guides, while others use detailed priority guides as a guideline for their entire project.

The key is to experiment, and take the time to find out which approach works best for you and your team. What remains important no matter your process, however, is the need to always keep the focus on user and business goals, and to continuously ask yourself what each piece of content or functionality adds to these goals.

Conclusion

For us here at Mirabeau, priority guides have become a highly efficient tool for designing user-first, content-first, and mobile-first, overcoming many of the significant pitfalls that come from relying only on wireframes. Wireframes do have their uses, and in many situations it's valuable to be able to visualize ideas and discuss them with team members, clients, or stakeholders. Sketching concepts as wireframes to test ideas can also be useful, and sometimes we'll even generate wireframes to gain new insights into how to improve our priority guides!

Overall, we've found that priority guides are more useful at the start of a project, when in the phase of defining the purpose and content of screens. Wireframes, on the other hand, are more useful for sketching and communicating ideas and visual concepts. Just don't start with wireframes, and make sure you always stay focused on what's important.

When it comes to tough conversations, practice makes perfect. Senongo Akpem uses roleplay to help new managers hone their skills.

If you're just getting started on the web, Susan Robertson has a radical suggestion: build something that interests you.
Get our latest articles in your inbox. Sign up for email alerts.

# data[].attributes.attachment_link.title
Priority Guides: A Content-First Alternative to Wireframes

# data[].attributes.attachment_link.description
by Published in Heleen van Nues , Design , Responsive Design , Process , Workflow & Tools Lennart Overkamp No matter your role, if you've ever been involved in a digital design project, chances are you're familiar with wireframes. After all, they're among the most popular and widely used tools when designing websites, apps, dashboards, and other digital user interfaces.

# data[].attributes.attachment_link.title
30 Best Online training Course Websites to Learn UI/UX

# data[].attributes.attachment_link.description
For ui/ux designers to learn the best design from the best online training course websites. I listed 30 online course sites. Hope it is helpful and useful to you.

# data[].attributes.attachment_link.keywords[]
ux design course; ux online course; ux designer

# data[].attributes.attachment_link.title
6 Free UX Design Courses From Top Universities Worldwide

# data[].attributes.attachment_link.description
To master UX skills requires adequate guidance from industry professionals. Here are 6 UX design courses from top universities, all FREE!

# data[].attributes.attachment_link.readable_text
When someone asks me for a redesign, three questions rush into my mind. Whether it's a product, an app, or a digital workplace environment, the questions are still the same:

What are the main pain points of the current solution?

How can I figure out solutions to those issues?

How can I reveal what-or which parts, or features-are the most important for users?

The answers to those questions build the foundations of everything that comes later-which is usually a design sprint -and we need to be sure about them. We need reliable, weighted, specific, and focused feedback. And heck yeah, it's complicated.
Related: How to introduce design thinking into your organization
During the last three years at Raona, we've tested more than 100 techniques to get reliable answers. Most of them related to design thinking, Manual Thinking, or Gamestorming. Some of them to less known sources, such as the DesignPedia, or even Lego® Serious Play®. And the UX gods know we've even tried to design our own techniques to get that info that helped us to do our jobs better.

Honestly, most of them didn't work as expected. Some revealed irrelevant insights, some offered just a partial vision, and some of them weren't guided or focused enough and users started complaining about a million things that were useless for us.

"Steer clear of design thinking techniques that lead to irrelevant insights."

But good news! There are three design thinking techniques that really made the difference, and we now use them in every single workshop we run. They provide specific, focused, and weighted feedback for anything you might be redesigning.

And a big point: You'll just need three hours.

The Speedboat

We use The Speedboat as a group/team focalized and guided critique activity. It helps us understand the main pain points of the current solution, and then prioritize or weigh them.

1. Start by drawing a speedboat in a whiteboard or a map. The boat represents our product, app, or system, so we put its name on it.

2. Explain to the group that the ​​boat's goal is to go as fast as possible. But... it seems like there are some anchors slowing it down.

3. Give every participant six stickers and a thick pen. Give them seven minutes to write the six anchors (pain points) that they think that are slowing down the boat. No extra rules. This simple.

4. When the time is up (or everyone has finished) ask every one of them (one at a time) to stand up and explain which they think the main anchors are, and why.

Pro tip: Ask them to stick the anchors to the map. Do it even if previously another participant put on that very same anchor (ask them to place it next to the other, or on top of it). It helps keep people in flow and reduces that awful feeling we all experience when our opinion is discarded.

"The speedboat reveals the main painpoints of a system and how relevant they are for users."

When everyone has explained their anchors, it's time to weigh them. You may use any voting technique you like. We give five red dots (stickers) to every user and ask him or her to stick them on the anchors that are more relevant for him or her. It provides a sort of pain point heatmap.

And you're done! You've just had a focalized 100-100 critique activity, and you end up with a weighted list of the most relevant pain points of your product.

It's magic.

Tips and tricks

Aim for 4-8 participants. You'll need seven minutes for the initial task, 2-3 minutes for every user to explain their anchors, and five more minutes for the democratic voting. For groups with more than eight participants, the group phase will last more than 30 minutes, and people will start disconnecting.

The original speedboat activity is designed to ask participants what they think that characterizes the optimal boat performance before doing the anchors exercise. We don't use this approach because it assumes that the team can create in some minutes a shared vision of what the optimal performance is and aim for that when setting anchors (which doesn't happen, and participants get less involved as they feel it's not their goal). But feel free to use it if you think it helps.

4x4x4

I know. Someone asked you for a redesign, you just revealed the main pain points, and wooooosh! Your mind starts creating an infinite bunch of solutions that may help or solve them all, and you feel in a hurry to share those solutions with the participants to see how they are received.
Related: 7 qualities of design thinking leaders
But hold on. Fight the beast. You came here to get information, not to generate solutions. You'll do that later in in your design sprint.

And keep this in mind: You've just discovered their pains, but users have suffered from them for a long long time. They've probably already been thinking and talking about solutions. And this information is gold for you because it won't be the final solution, but it will definitely show you how users think and what they consider a solution to their problem.

4x4x4 is a group guided brainstorming activity designed to focus on a single issue.

1. Choose the pain point or issue that you'll attempt to solve. Yup, just one.

2. Give every participant four blank cards and a thick pen. Give them four minutes to generate four possible solutions to the issue (one on each card).

3. When the time is up, group the participants in pairs, because the playoff is about to start. Give every pair four minutes to choose just four of the eight cards they have now (four from every single user), and discard the other ones.

4. When the time's up, make groups of four participants and again, give them four minutes to decide which of the eight they have they want to keep. Just like a playoff.

"4x4x4 is the most effective way to get lots of solutions in a short amount of time"

Short and simple. With eight users, in 12 minutes you generated a list of 32 possible solutions for the issue, and users (not you) had it filtered for you so that you end up with eight super cool solutions that users believe should help solve the issue. You now understand how your users think and feel about it.

All this in 12 minutes.

Tips and tricks

In the playoff phase, a couple of filtering rounds is fine. You can run a third one if you want (with the whole group), but make sure to save some time there. Having eight people agree on something is difficult and will take longer.

The Crazy 8s activity (described in GV 's Design Sprints) works also really well in when facing a specific challenge (though it's more focused on design). Anyway... 12 minutes. You can't fight that.

Buy a feature

You got the pain points and even discussed some solutions, so we should think about our solution for that redesign, right?

At this point, activities like prune tree or the Osborn's checklist may help you develop the strategy for the whole product evolution. But let me focus on a specific point that usually goes unnoticed.

You may get to this point with lots of possible solutions. Some coming from real users, some from the product team, and a lot coming from you and your team. So how do you choose the right ones?

Oh, I forgot-you do design sprints. You Crazy8, vote, pick up the ones you decide to test, and test with real users on Friday.

But who does this selection? You do (hopefully with the team).

And then cognitive bias shows up. Boom.

The buy a feature activity is a weighting and prioritizing group activity that will help you make that selection in a more reliable way-and it'll save you effort.

1. Before the user group session, start listing all of your new ideas, features, concepts, and give each of them a price (yes, a price) regarding its complexity. Imagine complexity as a sum of everything around the feature: development cost, for sure, but also design cost, difficulties to ship it to production, user engagement, training, support, etc. Don't even have a meeting with yourself for this. You know what's complex and what will take time, and what won't. Just put down the prices. It may be a good idea to standardize somehow. Say that 'normal' ideas cost 40 Oscars, "complex" ones cost 50 Oscars, and "easier" ones cost just 30 Oscars.

2. Now print fake money-something like Monopoly money that makes users feel like they're playing a serious game.

3. During the session, make user groups (with 2-4 participants in each group) and give each group some fake money-but not enough to buy all of the new stuff, obviously. A good ratio is to aim that they can purchase 50 percent of the features.

4. Give them seven minutes to decide which features they want to buy with their money. When they're done, or the time is up, ask them to get to the "shop" (that's you) to buy their features. Take their money, and deliver a sticker with the feature name to them. Ask them to stick it in a map.

And then something magical happens: You realize that everything you thought you knew before doing this activity is wrong. That solution you spent two hours discussing with the group, the one everyone seem to agree with, hasn't been purchased. The IT team main initiative was bought just once. And those small improvements that didn't seem to help at all have been purchased by almost all groups. What the... ?

People have a deep sense of cost and savings, about what's worth it and what isn't, and what deserves investment and what not. And all of it comes to light in this purchase list.

This is real info. This is where your real discussion starts. Explore with the group (directly) why those have been purchased, and why others weren't. You'll not only understand your users better, but you'll be able to make a proper selection.

"Buy a feature reveals which are the most relevant features for users, and how your product should grow."

Conclusion

Imagine you include the previous activities in a single workshop with eight users. In less than three hours you'll get the main pain points, some curated ideas that users believe solve their main issues, and a reliable prioritization about what should come next in your product and-who knows-maybe a product strategy plan. And a better and deeper understanding of the users relationship with your product/app/system.

All this in just three hours.

# data[].attributes.attachment_link.title
3 design thinking techniques to run before a redesign

# data[].attributes.attachment_link.description
When someone asks me for a redesign, three questions rush into my mind. Whether it's a product, an app, or a digital workplace environment, the questions are still the same: What are the main pain points of the current solution? How can I figure out solutions to those issues?

# data[].attributes.attachment_link.title
The Artphabet: a Tribute to Art and Typography

# data[].attributes.attachment_link.description
Last week I shared a beautiful typography post on an alphabet that mixed 3D and cartoon effects. I mentioned that it was very unique amongst so many of these types of exercises.

# data[].attributes.attachment_link.readable_text
In week 2 we kicked off the first web app for Project6. Once again we hit the paradox of choice, this time with CSS frameworks. One of the hardest things to find these days is a good comparison between libraries, subjective or objective. On top of that, most articles only look at the top couple frameworks (Bootstrap, UIKit, Foundation) and don't take much more than popularity or or look and feel into account.

I decided to create a framework evaluation process to compare a number of modern css frameworks. For each framework, I'm going to create a dummy blog layout with as many major components as possible. Additionally for all the libraries offering Sass support, I'm only going to import the necessary files to render the page. Then we can look at the compiled file size of the css bundle file and the number of elements required to render the entire layout. It's not perfect but we can at least evaluate some objective values and looking to minimize file size of libraries is always a good practice.

In this story I will evaluate the following CSS libraries/frameworks

Edit History
Jun 20-2017: Initial Post
Dec 7-2017: Adds Bootstrap4 Beta 2. Performed well, no extra css required, mid-range for total number of elements and gzipped file size. Added css classes written stat.

All example code can be found at https://github.com/imothee/css-framework-eval

Caveats: I am not importing the Javascript libraries as I am not using any JS necessary components in the evaluation and additionally, I use React to do most modern JS development so I'd rather use a native React component (such as dropdowns, datepickers, menus) over a framework built in one. I am also a fairly experienced front-end developer but I am also not a CSS guru so I may end up adding extra elements/silly code as I work from the framework examples. Pull requests on better ways to build each part welcome.

Bootstrap

With the release of the beta for Boostrap4, I have added it to the comparison list. Bootstrap documentation has always been incredibly polished and the framework is always top of class. My biggest issues with it have been the early announcement of alpha's prompting an early adopters dilemma and the fact that the design is so distinct you can see way too many sites using the base defaults.

It was simple to get started, yarn add and importing the very descriptive scss files meant that custom setup was simple. Every possible feature, class and utility was added by default. The new grid system was slightly confusing at first. I was unsure of the difference between col-sm and col-6 and why some classes were col-6 and some were a mix of multiple class markups such as "col col-lg-2". I love the adoption of flexbox for grids and reboot provides a really clean baseline for development.

Overall Boostrap4 was a dream to develop against, the site looked sleek with the defaults and the code was clean and small.

Minimized CSS Size: 68kb. Gzip: 12kb

Total Number of Elements: 49

Custom CSS: 0 classes, 0 properties

CSS classes written: 48 total, 34 unique

Subjective developer experience: 4.5/5

Out of the box elements: 5/5

Bulma

Bulma appears to be a fairly new addition to the suite of modern CSS frameworks. From first glance the base library looks clean and fresh. It provides a modular sass framework to optimize your bundle to only the necessary classes which we will use as much as possible.

Development wise, the documentation could use some minor improvement. The high level grouping of items in the documentation (elements, components, layout) wasn't immediately obvious and I definitely spent more time than I guessed trying to find the background-color helpers for example. Knowing which files to import for each class was also vague, for example container was hidden inside sass/others. Additionally some modules have an explicit dependency on other files contained in utilities and the documentation never mentioned importing base/ to normalize the css. Overall working with the underlying framework was pleasant, the classnames were expressive and the actual css generated looked minimal and simple. I'm a huge fan of flexbox so seeing a library default to it for layout was a huge plus in my opinion.

Overall I only had to add two custom classes to my css and overall the site came out looking great with the base classes.

Minimized CSS Size: 73kb. Gzip: 10kb

Total Number of Elements: 53

Custom CSS: 2 classes, 2 properties

CSS classes written: 56 total, 37 unique

Subjective developer experience: 4.5/5

Out of the box elements: 4.5/5

Foundation

Foundation is one of the core mainstream CSS frameworks. It's been around for years and has been a well supported alternative to Bootstrap. That said, it's not an old framework, it's constantly updated to support the newest features such as grids with flexbox support.

Getting started was slightly overwhelming, I'm not one for installing cli tools or getting started templates especially for a CSS framework. All the default setup documentation defaulted to importing everything and finding the right way to do modular builds took a bit of digging. additionally Foundation doesn't have as many pre-made css components as Bulma, Semantic UI or UIKit instead offering more JS marked up widgets.

Overall I felt like the default theme looked subjectively the worst of all the frameworks (to the point where I chose a custom hero color).

Minimized CSS Size: 30kb. Gzip: 7kb

Total number of elements: 56

Custom CSS: 4 classes, 4 properties

CSS classes written: 46 total, 21 unique

Subjective developer experience: 4/5

Out of the box elements: 3.5/5 (most are Javascript add-ons which we aren't using here)

Milligram

The whole Milligram library comes in at 2kb gzipped but in the effort of fairness I will also import only the files necessary to render the standard layout. This doesn't seem to be a default as the documentation doesn't mention modular imports but the npm module has the base sass files exposed. While being incredibly small, Milligram is also the least feature rich framework offering barely any higher level styled components. This meant that I had to write a lot more custom css rules to get our website up and running. Also, after a while I realized that Milligram doesn't bundle NormalizeCSS into the sass files and had to include it separately.

Additionally, h1 and h2 elements inside a container that isn't wrapped by a row and a column overflow the bounds and push all the other content out so that means adding additional elements to hold text content.

Overall the layout came out very clean and looks quite reasonable using default colors. Surprisingly it didn't take that long to add all the custom markup and although my nav bar looks less feature rich than the other frameworks it's still usable. I'm also amazed at the total size of the css and the number of html elements!

Minimized CSS Size: 10kb. Gzip: 3kb

Total number of elements: 49

Custom CSS: 7 classes, 17 properties

CSS classes written: 34 total, 19 unique

Subjective developer experience: 4.5/5

Out of the box elements: 3.5/5

Pure

Immediately Pure seemed less "developer friendly" as the entire getting started guide focuses on CDN content and makes no mention of an npm repository. There's documentation on Github and hidden in a Tools menu that shows an npm module so at least that's published but it's also only css files so assuming you wanted to customize your colors and classes, you'd have to use overrides instead of sass variables (my preference).

Weirdly, I spent some time debugging an issue where the header was 100% of the height. Turns out I had forgotten to add <!DOCTYPE html> to the index.html but surprisingly none of the other CSS frameworks had any issues without HTML5 mode.

Overall the default styling and theming wasn't as great as expected for the file size. There was no typography markup which definitely makes a visible difference in comparison to the other frameworks chosen. The grid system is interesting but compared to some of the flexbox grids it seemed confusing and more difficult to achieve the same results. I'm also not a huge fan of namespaced css-libraries as I rarely have naming collisions in my custom projects but I can see why some frameworks do so.

Minimized CSS Size: 17kb. Gzip: 4kb

Total number of elements: 48

Custom CSS: 7 classes, 7 properties

CSS classes written: 39 total, 27 unique

Subjective developer experience: 4/5

Out of the box elements: 3.5/5

SemanticUI

Semantic-ui failed to install via yarn. That meant I was unable to install the less packages so I had to fall back to the semantic-ui-css package and compiled css packages. First impressions, there are a ton of compiled css files which might make this complicated but likely result in a smaller build file. The documentation looked great but hard to parse out, especially the grid section.

Form styling at first was more difficult than expected, there's an input style available and I spent some time building it myself until later I found forms under collections.

Overall the site looks very clean and the amount of custom work required was minimal. That said, the minimized css size is slightly shocking considering that I was importing only the elements needed to render the page below. It's well over the average size and twice Bulma which had a similar amount of prebuilt features included. Amazingly the gzipped size is only 20kb but still twice the nearest comparison.

Minimized CSS Size: 146kb. Gzip: 20kb

Total number of elements: 47

Custom CSS: 2 classes, 2 properties

CSS classes written: 90 total, 39 unique

Subjective developer experience: 4/5

Out of the box elements: 5/5

UIKit

UIKit appears to be a fairly new entry to the suite of CSS frameworks. I ended up using v3 beta and the setup was seamless. I had a few small nits about naming of the components and finding various classes but the entire developer experience was very pleasant.

Overall the site came out looking pretty nice with 0 (zero!) custom classes required to match the majority of the layout. The file size was impressive as well beating out Bulma which I felt had the closest feature set match.

Minimized CSS Size: 33kb. Gzip: 6kb

Total number of elements: 51

Custom CSS: 0 classes, 0 properties

CSS classes written: 52 total, 31 unique

Subjective developer experience: 4.5/5

Out of the box elements: 5/5

Overall Impressions

*Update Bootstrap4*, Bulma and UIKit really impressed me for the sites where you want more pre-made features. Both offered rich customization of the themes through Sass and both had a smooth developer experience, a small file size and a great looking final result.

For sites where you want to customize the majority of the components and rely less on pre-made elements, Milligram was also an incredibly pleasant and light weight library. I wouldn't hesitate to reach for it when I want total control.

From a utility perspective for throwing together a quick application, Bootstrap4, Bulma and UIKit are tied in first place in my opinion and right now I'm having a tough time choosing one over the other. Go for whichever has the required components and the look and feel matches the application you're building!

The Winner? The web community for the large amount of free and open source libraries with incredible features and polish.

Comparison Table

Methodology

Element count:

document.all.length

Number of classes used:

var totalClasses = 0; var classes = {}; for(i=0; i< document.all.length; i++) { var el = document.all[i]; totalClasses = totalClasses + el.classList.length; el.classList.forEach(function(c) { classes[c] = true; }); }; console.log("Classes", {total: totalClasses, unique: Object.keys(classes).length});
All the above is based on my opinion and the code available on Github. Please provide constructive feedback or pull requests for anywhere I could have done better performing a 1:1 clone of the layout or using the frameworks. This took surprisingly longer than I expected and this article is definitely a living work in progress.

# data[].attributes.attachment_link.title
Evaluating CSS Frameworks - Bootstrap vs Bulma vs Foundation vs Milligram vs Pure vs Semantic vs...

# data[].attributes.attachment_link.description
In week 2 we kicked off the first web app for Project6. Once again we hit the paradox of choice, this time with CSS frameworks. One of the hardest things to find these days is a good comparison...

# data[].attributes.attachment_link.readable_text
2017 was a bold year in design, with vibrant colors, daring typography, amazing motion graphics, with brave tones "moving away from edgy startups into the mainstream" Ragged Edge . This amazing year left us with a lot of inspiring design that can be seen across all areas of branding, digital design and motion graphics. With big brands switching their brand identity to a fresh and modern approach, all media will follow, using the potential of vivid colors to increase their conversion rates.

With so many bold trends coming out this year, it's time to release your creativity, so let's reveal the best trends in graphic design that will be

# data[].attributes.attachment_link.description
2017 was a bold year in design, with vibrant colors, daring typography, amazing motion graphics, with brave tones "moving away from edgy startups into the mainstream" Ragged Edge . This amazing year left us with a lot of inspiring design that can be seen ...

# data[].attributes.attachment_link.keywords[]
cromorama. come il colore ha cambiato il nostro sguardo. ediz. a colori

# data[].attributes.attachment_link.title
Cromorama. Come il colore ha cambiato il nostro sguardo. Ediz. a colori

# data[].attributes.attachment_link.description
Compra Cromorama. Come il colore ha cambiato il nostro sguardo. Ediz. a colori. SPEDIZIONE GRATUITA su ordini idonei

# data[].attributes.attachment_link.readable_text
This year we have seen many multicolored gradients with vibrant color palettes and irregular shapes with blur and distortion effects. Gradients are currently being used in many ways, but the most characteristic, in terms of trends, sees their use extended to secondary elements within the composition, such as hovers, titles, 3D elements, icons, and more.

Gradients have been trendy for a while now, they initially made a comeback in a conventional way in backgrounds and images. Spotify made them popular again by applying duotone gradients over photos as a characteristic element of the brand in its campaigns and microsites. History is currently being revisited, taking us through an exploration of the different aesthetic movements of the 80s and the beginnings of web design in the 90s. This revival gives us multicolored retro gradients and duotone gradients from V A P O R W A V E to Memphis Design.

Awwwards Gradients Collection

As always, we have made a selection of SOTDs and nominees where you can see these effects in use, we hope you find some inspiration in this Trendy Gradients Collection

Types of Gradients

We can blend colors in multiple ways, the most common being linear or radial gradients with different parameters like radius, orientation, opacity or color points. Experiments can also be made with non-uniform blends, which use gradient meshes or other techniques. With gradient mesh the surface of the gradient is distorted to generate a freeform shape. There are many types of gradients, like monotone, duotone, multicolor, gradients ramps, etc, as demonstrated in the following graphic.

Get involved with gradients, Download the Source File for free here in vector format .ai or pdf to do your own design experiments with the gradients from the poster.

Useful Tools for CSS gradients

To recreate these effects in CSS there are loads of tools available allowing them to be created through visual editors, simply by copying and pasting the CSS code, as you can see here: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

EGGRADIENTS

A gradient color palette containing 200+ gradient background colors, which lets you easily find a gradient color you like and copy the CSS straight into your design!

WEBGRADIENTS

A collection of 180 elements of gradients with CSS code and PNG background files.

COLORSPACE

A complete color resource with palette generator, gradient generator, and 3-color gradients.

COOLHUE

A cool handpicked Gradient Palette with CSS code and plugins for Figma and Sketch.

GRABIENT

This generator will give you linear gradients, which you can customize and then download the CSS gradient code!

COLOR DESIGNER

Containing many free color tools: palette generator, gradient generator, color mixer, "what color is this?", color converter, and more!

CSS GRADIENT

Website offering lots of information about gradients and a free tool which allows you to generate a gradient background for your website.

# data[].attributes.attachment_link.description
This year we have seen various multicoloured gradients with vibrant color palettes and irregular shapes with blur and distortion effects. ⭐ Trendy Gradients in Web Design ⭐ are used in secondary elements within the composition, such as hovers, titles, 3D elements or icons.

# data[].attributes.attachment_link.readable_text
Apple's Product Development Process may be one of the most successful design processes ever implemented. With the company verging on becoming the world's first $1 trillion business organization - there's a lot that designers can learn from Apple and introduce into their own design environments.

Apple is a notoriously secretive business. In Steve Jobs' time at the company it would have been near impossible to find out about the internal workings of the business. This isn't surprising when a business's market advantage is its design approach. It's worth keeping it under wraps.

However, Adam Lashinsky, the author of Inside Apple: How America's most Admired and Secretive Company Really Works has been given a look at the process. While there are still aspects of the way that Apple works that are shrouded in secrecy - you can get a good idea of the overall high level process.

Apple's Product Development Process

Design is at the Forefront
Author/Copyright holder: GiuliaPiccoliTrapletti . Copyright terms and licence: CC BY-SA 4.0
How do you give designers the freedom to design and ensure that the products they produce fulfil their visions? Well at Apple they put design at the forefront.

Jony Ive - the British designer that is the Chief Design Officer (CDO) at Apple- and his design team lead the company and they do not report to finance, manufacturing, etc. They are given free rein to set their own budgets and are given the ability to ignore manufacturing practicalities.

At the heart of the design department is the Industrial Design Studio where only a select few Apple employees have access.

It's a simple concept that allows for the creation of incredible products.

Design Teams are Separated From the Larger Company

When a design team works on a new product they are then cut off from the rest of the Apple business. They may even implement physical controls to prevent the team from interacting with other Apple employees during the day.

The team is also removed from the traditional Apple hierarchy at this point. They create their own reporting structures and report directly to the executive team. This leaves them free to focus on design rather than day-to-day minutiae.

A Documented Development Process

Author/Copyright holder: Ed Uthman . Copyright terms and licence: CC BY-SA 2.5

The Apple New Product Process (ANPP) information is given to a product development team when they begin work. It details every stage of the design process and it goes into elaborate detail. The idea is to define what stages the product creation team will go through, who will be responsible for delivering the final product, who works on which stage and where they work and also when the product is expected to be completed.

Monday is Review Day

The Apple Executive Team holds a regular Monday meeting to examine every single product that the company has in design phase at that point in time. This isn't as daunting as it may sound; one of the keys to Apple's success is that they don't work on hundreds of new products at once. Instead, resources are concentrated on a handful of projects that are expected to bear fruit rather than being diluted over many lesser projects.

If a product cannot be reviewed at one meeting - it's automatically at the top of the agenda for the next meeting. In practice, this should mean that every single Apple product is inspected by the executive team at least once a fortnight. This keeps delays in decision making to a minimum and enables the company to be very lean with its approach to design.

The EPM and the GSM

The EPM is the engineering program manager and the GSM is the global supply manager. Together they are known within Apple as the "EPM Mafia". It's their job to take over when a product moves from design to production.

As you might expect, these people are usually going to be found in China, Apple does very little of its own manufacturing. Instead it relies on contract outsourcing companies like Foxconn (one of the largest employers in the world) to do this for them. This removes much of the headache of manufacturing for Apple whilst keeping production costs as low as possible. There is a significant market advantage to this approach and its one that many other electronics manufacturers are emulating now.

The EPM Mafia may sound scary (and they probably are to the suppliers) but their real job is simply to ensure that products are delivered to market in the right way, at the right time and at the right cost. They may disagree at points but their guiding principle is to act in the interests of the product at all times.

Iteration Is Key

Like any good design company, the design process at Apple is not over when manufacturing begins. In fact, Apple iterates the design throughout manufacturing. The product is built, it's tested and reviewed, then the design team improves on it and it's built all over again. These cycles take 4-6 weeks at a time and may be run many times over a product's development lifecycle.

Author/Copyright holder: CyberDoc LLC . Copyright terms and licence: Fair Use.

When production is complete the EPM will take possession of some or all of the test devices and then take them back to Apple's headquarters at Cupertino.

This is a very costly approach but it's one of the reasons that Apple has a reputation for quality. The more you invest in design, the more likely you are to build incredible market changing products. It's the process that the iPod, the iPhone and the iPad went through.

The Packaging Room

This is a very-high security area in Apple and it's where prototypes are unboxed. As you might expect, the security is to prevent leaks to the outside world. If you ever do see a leaked prototype for an Apple product - it won't have come from here. It's more likely to have vanished from a production line in China.

A Launch Plan

The final step in Apple's product development is product launch. When the product is considered to be as good as it can be - it enters an action plan known as "the Rules of the Road". This explains all the responsibilities and actions that must be taken prior to a commercial launch of the product.

It must be a nerve-wracking experience to be privy to the "Rules of the Road" because if you lose it or leak it... you're immediately fired. This is explained in the document itself.

The Take Away
Author/Copyright holder: Manutaus. Copyright terms and licence: CC BY-SA 3.0
Apple's process is complex, expensive and demanding. If you compare it to most business theories - it shouldn't work. However, to date it has out-performed even the wildest of expectations.

You may not be able to emulate all of their processes within the space of your own workplace but there's no reason that you can't develop written processes for design phases and launch phases of your projects, for example. And, of course, there is no reason at all for you in not iterating!

The more you know about successful design processes, the more you can take some of the best aspects of them and use them to enhance your own products.

Resources

Find out all the details of the design process in: Inside Apple: How America's Most Admired--and Secretive--Company Really Works by Adam Lashinsky ISBN 97814555512157, Published January 25, 2012

And take an insight into Apple's greatest designer's mind in: JonyIve: The Genius Behind Apple's Greatest Products by Leander Kahney ISBN 159184617X, Published November 14, 2013
Hero Image: Author/Copyright holder: Sreejithk2000. Copyright terms and licence: Public Domain.

# data[].attributes.attachment_link.title
Apple's Product Development Process - Inside the World's Greatest Design Organization

# data[].attributes.attachment_link.description
Apple's Product Development Process may be one of the most successful design processes ever implemented. With the company verging on becoming the world's first $1 trillion business organization - there's a lot that designers can learn from Apple and introduce into their own design environments. Apple is a notoriously secretive business.

# data[].attributes.attachment_link.readable_text
Lemonade offers renters and home insurance policies for homes, apartments, co-ops and condos. They don't employ insurance brokers-it's all handled by chatbots and artificial intelligence.

It seems like everywhere I go, they come up in conversation. At an entrepreneurship meetup, there was a discussion about their innovative business model; at another meetup, attendees noted the company's disruption of the insurance world; and in a Facebook group for female UXers, a member mentioned Lemonade for their gender inclusiveness.
Related: Who should write your microcopy?
Curious to see what the fuss is about, I finally checked out Lemonade and was delighted by the user experience. What really sends their UX over the top is their microcopy. For this post, I'm going to share some examples of how Lemonade uses microcopy to make their experience as smooth as possible, and the best practices we can learn from them.

Chatbot and AI service representatives must be authentic

How do you make talking with a chatbot feel like a real converation? You need two main ingredients:

1. Each screen holds only one question, and you move on to the next when the former is answered, just like in a real life conversation.

2. The opposite end of the conversation-the UI-sounds and feels like a human would. In Lemonade's case, it's a bot named Maya (who even has a human face), but the most important ingredient is the simple, natural language. Although the subject matter is insurance, there's no use of formal legal language (I'll talk more of this later), and everything is written in contemporary, convincing, conversational language.

A golden tip: If your product features a form, a bot, or any other registration process that simulates an interaction with a service rep, take the time to visit a service call center and listen in. The calls you listen to will give you the simple conversational language in which to phrase questions and provide answers.

When I wrote a chatbot for a banking process, visiting a call center gave me almost the entire representative side of the conversation, in the most natural and authentic way.

Write questions as a continuous conversation

For example:

The first question asks my name, and in the next screen I'm referred to by my first name.

In one question they ask, "What's your home address," and in the next they ask, "Do you rent or own it?" Maya the bot does not repeat "your home," as I'm relied upon to hold my end of the conversation and keep in mind what "it" refers to, even though the former question is no longer on screen.

Present dynamic content so at any given moment, users have only the information (and all of it) they need right now

For example, only after I indicated I had roommates did a notice appear to inform me they are not covered by the insurance policy. If Lemonade had indicated that (or any other comment) permanently, they would have cluttered the screen with text only some of users might need.

Before choosing:

After choosing:

On top of that, the notice appeared as if Maya were telling it to me in response to the choice I made, thus strengthening the feeling of a personally customized conversation.

On Lemonade's registration screens, I clearly experienced how information presented to me (according to the choices I make):

Gives a sense of personalization

Reduces difficulties and the sense of uncertainty

Boosts the confidence that an explanation will appear as soon as I need it

Before choosing:

After choosing:

To create certainty, give complete information about each choice

What am I choosing here, who is it for, and what are the ramifications of making this choice? Only when users have all the information needed, can they make an informed and settled choice.

In this example, someone who wants to take out insurance for a rented apartment can add interested parties to the policy. This choice appears with all the requisite information: price (free), who can be considered as an interested party (building supervisors or property owners), and what it means to add interested parties (they get notified on any change made to the insurance policy).

This way people are sure they got what they meant to get, or they can decide they need something else.

Legal terms should be easy to understand

Yes, it's possible to explain legal terms in a way that isn't confusing.

Under Lemonade's excellent and clear explanations on what the insurance policy does and does not cover, appears this magical sentence:

Any other legal department I encountered would have demanded to write something like this:
The coverage detailed here is only an incomplete summary and reading it does not exempt the insurance buyer from reading the entire policy as it appears in the company books, including changes which are published from time to time...
Huh?

Using archaic, long-winded legalese works against the sense of trust, human contact, and experience of digital products.

Lemonade shows it can be done differently. Everything is simple and clear, accompanied with real-life everyday examples-straightforward and trustworthy.

This interface speaks to humans in way that's easy to understand, thus gaining their trust.

Off-topic marketing bonus: People come first

Lemonade's business model makes it so that they can settle claims faster and easier, resulting in happy customers. Plus, part of their revenue goes to charity. It's all about putting people first.

But you have to really look to find Information about this model-it's towards the bottom of their homepage, below six strips where the main focus is on the customers by explaining who Lemonade is for, the rates offered, the short process time for claims, how to migrate an existing policy from another company, and more.

It's clear that people come first, and customers may wind up choosing Lemonade because of this.

What great design have you experienced lately? We'd love for you to share it here on the InVision Blog. Get in touch: @InVisionApp.

Keep reading about microcopy: 8 quick ways to write microcopy that turns visitors into customers.

# data[].attributes.attachment_link.title
Microcopy best practices I learned from Lemonade

# data[].attributes.attachment_link.description
Lemonade offers renters and home insurance policies for homes, apartments, co-ops and condos. They don't employ insurance brokers-it's all handled by chatbots and artificial intelligence. It seems like everywhere I go, they come up in conversation.

# data[].attributes.attachment_link.readable_text
Many people think that it takes special skill and fancy equipment to run a user-testing session on mobile. Not true. If you've ever run user-testing sessions with regular computers, setting up a usability study with mobile devices is a breeze. You need to take care of a few extra details: equipment, the right testing room, and the right users.

Equipment

One of the daunting problems in user testing with mobile devices is: how do you record the screen? In studies run on a computer, you can use a a screen-recording software such as Morae, Camtasia, or Ovo Studios, but what should you use for mobile devices? Screen-recording apps for mobile are still in incipient stages; often they require a jailbroken phone or don't allow the user to take full advantage of the phone capabilities (for instance, UX Recorder for iOS only records the screen if the user uses an in-app browser). Screen-recording software rarely provides finger footage: the researcher will have to use a separate camera to record the study-participant's fingers, and then possibly combine the finger and the screen streams.

For all these reasons, recording with an external camera is still the preferred method when doing user testing for mobile. Almost any video camera can be used, provided that it will stay focused on the screen while the study participant is using the device. Although it's possible to fix a regular camera on a tripod right above the mobile device, most mobile-usability researchers prefer either a webcam or a document camera because they usually come with software that allows real-time projection of the video footage on a computer screen. That allows the facilitator to witness what the study participant does on her phone without intruding in her personal space. In our mobile-usability studies, we have used 2 types of cameras: a document camera and a webcam. There are advantages and disadvantages to each of them.

Document Camera

This solution somewhat restricts the movement of the phone during the session. Since the camera is fixed, study participants must maintain their phones within the camera's range. They can do that either by keeping the device flat on the table, or by holding the phone in their hands (although in this last case the resulting video quality is suboptimal). They can also easily (and naturally) switch the device orientation from landscape to portrait as needed.

The document camera records the phone screen; the capture is projected live on a testing laptop.

Document cameras are available in a wide range of cost and quality. We have used Elmo (at the higher end of the spectrum) and iPevo (at the lower end). Better document cameras have manual focus, a variety of image controls, and the ability to zoom in without substantially altering the quality of the resulting image. They also have an adjustable, preferably tall neck that allows a wide range of recording and is suited for both tablets and phones.

Webcams and Mobile-Device Cameras

Webcams are another class of devices that can be used for mobile- or tablet-screen recording. These are usually installed on a cradle that can be either self-fabricated or purchased. The user then places her phone on the cradle (sometimes using Velcro to attach it) and holds the entire contraption in their hands, in a position that is more naturalistic than when the phone rests on the table.

How big the cradle is will influence the ability to record tablet screens (small cradles do not work well with tablets). Another essential quality of the cradle is lightness: since the participant is supposed to hold the camera, the cradle, and the mobile device in her hands, the resulting apparatus should be as light as possible.

The combination cradle plus webcam is sometimes called mobile-device camera; the web is full with instructions about building your own cradle. You can also buy either the cradle only or the entire package¬: cradle plus camera.

The webcam needs to allow manual focus and zooming. (With autofocus, the camera tends to focus on the participant's fingers rather than on the device screen.)

Although at first the mobile-device camera may seem more appealing than the document camera (both in terms of cost and flexibility of device positioning), in practice there are some big disadvantages. First, the mobile-device camera is often too heavy (at least 200 grams), and users tire quickly and place it (and their phone) on the table. Second, the image quality is often less good than with a document camera. Third, often this solution is not suited for tablets: due to the larger surface of the tablet, the cradle needs to be taller than for a mobile phone to support a wider recording angle, and the resulting contraption becomes too heavy. Last but not least, the camera can block the view in landscape mode. There are some solutions to deal with this last issue - for instance, if the phone is not attached with Velcro to the cradle, the user may be able to switch it to landscape without turning the entire cradle and blocking the view with the camera. But that means that she has to use extra force in her fingers to keep the phone stable on the cradle while she's working with it.

Software

Whatever camera you use, you will need some way to project it on a computer screen to allow the facilitator to follow the participant as he is working on the device. Document cameras and webcams usually come with software that projects the camera capture live on a computer screen. Once you have that live capture on a big monitor, you can take advantage of techniques normally used in traditional usability testing to record and broadcast the computer screen - for instance, you can use your favorite screen-recording software (Morae, Camtasia, Ovo, or even GotoMeeting and Webex).

Up to 2 observers can watch the video on a laptop screen by crowding close to the facilitator; with more observers use the laptop's external-monitor port to project the video feed to an external monitor or projector.

Some cameras come with their own video-recording software; if that is the case, you can skip the screen recording and use the camera software instead. The disadvantage is that often these programs require more computing power than your regular screen-recording software.

Testing Environment

The room in which you set up your testing session needs to satisfy a few extra constraints to be suitable for mobile testing. A regular user-testing lab will be nice, but is not necessary unless you plan to have many live observers.

First and foremost, you need to be able to control the sources of light in the room. That means either a windowless testing room or one with darkening blinds. To avoid glare, there should be no source of light directly above the testing device. In most cases, turning off the lights and using side table lamp(s) works well.

The brightness of the camera, device screen, and the monitor on which the device screen is projected will all influence the quality of the live projection and of the resulting video. You should be able to easily adjust these at the beginning of the testing session and, if necessary, during testing (although it's best to avoid interrupting the participant during the tasks with a request to adjust device-screen brightness).

You will also need to make sure that you have a good cellular signal in the testing room, as well as a high-speed wireless network available. We usually recommend that you test apps and sites on both cellular and WiFi networks, as these different tests often provide complementary information. Because connectivity is usually worse on cellular signal, you can see how your app fares on a poor connection. In contrast, with a good WiFi, you can focus on interface issues: Is that button salient enough? Can the user understand the content?

Unlike for traditional user testing, for (at least some) mobile studies it may be ok if the testing room has some nearby employee traffic and occasional noise. Often, mobile devices are used in interruptible environments, so sporadic, nondeterministic external sounds may create a slightly more naturalistic situation.

Users

Unless you plan to study the learnability of a new device, we usually recommend that you recruit people who are familiar with their devices and have been using them for at least 3 months. New users often do not exhibit typical behavior - they may not know how to use their device yet, or they may not be familiar enough with conventions specific to the operating system.

Unless you're Apple or Google, it's less important to you how people fare the first few times they use a new phone or tablet. If you have a website or mobile app, almost all your users will already have learned how to use their device by the time they get around to using your site or app.

Some people own several phones or several tablets. When you screen participants, make sure that the questions specify the device that you want to study. For instance, if you want iPad users who shop on their device, you may want to ask "How often do you shop on your iPad?" rather than "How often do you shop on your tablet?"

If you want users to install apps from an app store on their devices, make sure that:

They know how to do it (this can be an issue especially for tablets, which are often shared devices).

They either know their App Store password or they will bring it for the testing session.

They have a credit card associated to their account (if you want them to download paid apps during the study). If they don't have one, be prepared to give them a gift card that they could use for purchasing the apps -and, of course, reimburse them right away for any such purchase.

Other Parts of Testing

For anything else (screening, task creation, facilitation, and reporting), you can use the skills learned from regular user-testing sessions. The most important point about a mobile usability study is that it's a usability study, not that it's mobile. We already have wide range of articles on user testing, as well as full-day courses with in-depth hands-on practice in study facilitation.

Conclusion

In order to setup a mobile-usability study, invest in a good document or mobile-device camera and make sure that you have a testing room with proper lighting. Connect the camera to a testing computer and use existing screen-recording software to record and broadcast the sessions. Finally, take advantage of prior knowledge about running and analyzing usability studies.

One thing that we've learned from running hundreds of mobile usability studies - whether for clients or to get examples from our courses on mobile and tablet design - is that the usability requirements increase as the platform shrinks. Smaller screens equal bigger needs to test your design with real users, because there are more ways for users to fail. Since it's easy enough to run these usability studies, it's even more important to test your design when you're targeting mobile users.

# data[].attributes.attachment_link.description
Many people think that it takes special skill and fancy equipment to run a user-testing session on mobile. Not true. If you've ever run user-testing sessions with regular computers, setting up a usability study with mobile devices is a breeze. You need to take care of a few extra details: equipment, the right testing room, and the right users.

# data[].attributes.attachment_link.title
User-Centered Design Process Map | Usability.gov

# data[].attributes.attachment_link.description
The user-centered design process is composed of several methods and tasks related to website development.The type of site you are developing, your timeline and the environment in which you are developing will determine the tasks you perform and the order in which you perform them.

# data[].attributes.attachment_link.readable_text
Short analysis on the current state of affairs and a few tips to keep in mind.

You know how it works.

Casually watching a review on Unbox Therapy about this mug that apparently is unspillable. I'm having a laugh but by the end of the video I'm also intrigued what people ask for it.

There it is on Amazon. On sale at $14.99 from $24.99. For a limited time only. Only 3 left in stock for the stainless steel version. I love stainless steel. It's a bargain and it will soon be gone. I'll be left to drink coffee from my spillable mug. It would be a shame to pass this. F**k it. 💸

It makes things desirable

Scarcity is the psychological bias that makes us place a higher value on things that are scarce than those in abundance. Basically, we tend to like things that are harder to obtain.

It has become the norm

As most things, scarcity started offline. Expensive restaurants serve small portions on large plates to suggest that ingredients are rare and prestigious colleges have limited places to maintain the sense of exclusivity.

But as tech businesses became more mature and digital products more refined, scarcity was quickly adopted online and it is now one of the most popular methods to increase desirability.

We have come to a point in which people are so used to seeing and expecting some form of scarcity when browsing online, that implementing one inside your product is not a competitive advantage anymore but a starting point for any goal that aims to satisfy users' needs.

It combines multiple biases

Scarcity became popular because it's extremely powerful and fairly easy to implement. And the reason it's so effective is because it combines multiple biases into one:

1. Loss aversion

If we don't act upon a scarce product, it basically means we'll lose both the product itself in the short run but also our freedom to choose it in the long run. Double the loss = double the pain.

2. Social proof

Usually, products become scarce when the demand is high. Once that happens, it implies that other people bought it in the past so it must be valuable and we should seize the opportunity.

3. Anticipated regret

When facing a decision, we anticipate not only the events but also the associated regret we might experience. Deciding to act now is our attempt to try and eliminate that possibility.

It comes in different forms

Even though scarcity can be applied to unquantifiable features like quality or experiences, its effect is much more powerful when assessing measurable resources like objects or places. It's the reason the likes of Amazon and Booking.com embrace it and use it extensively.

Based on these measurable resources, there are 3 main forms of scarcity:

1. Time-limited scarcity

When time has a limit, it creates a deadline that makes people act before the time is up. When the deadline is unknown, people are not certain that they can get the object anymore unless they act now, which increases the pressure but shows lack of empathy from a UX standpoint.

Lightning Deals on Amazon: Good

They last a few hours and show the deadline. They are accompanied by the percentage claimed by other people to highlight the urgency.

Courses on Interaction Design Foundation: Smart

Present the time until enrolment ends. Fully booked courses are still displayed to show people what it's like to miss the opportunity.

Buying things on eBay: Bad

Time limited products are marked with a red icon and a vague "Almost gone" tag. Not showing when the offer ends is unthoughtful and manipulative.

Searching places on Airbnb: Fair

It shows people how limited the offer is by displaying the low percentage of listings left and a "Rare find" tag to make them feel lucky about their search.

2. Quantity-limited scarcity

Limited or rare supplies are perceived by people as a threat to their freedom of choice, triggering a reaction to fight the threat and maintain their access to the resource.

Quantity-limited scarcity is considered more effective than time-limited scarcity because the end of the supply is unpredictable, depending exclusively on demand rather than time.

Looking for hotels on Booking.com: Impressive

Booking is the Usain Bolt of scarcity and probably owe much of their success to it. They show the number of rooms left but also a ton of tags and labels that make you feel you're about to make the deal of your life.

It's smart how they use the massive data they have and, even though everything is pretty overwhelming, the information is useful.

Booking flights on Ryan Air: Good

They take advantage of the fact that cheaper seats sell first and use this to highlight the limited number of seats left for the lowest price.

Buying clothes on Selfridges: Subtle

Product details display both the available and unavailable sizes. This way, it makes the available ones feel more scarce. Subtle and useful as some people are between sizes.

3. Access-limited scarcity

It refers to limited access to features like information, groups or spaces. Research showed that censorship made people place a higher value on the restricted features than those that were not because exclusivity made them feel special.

Becoming a subscriber on Medium

Medium charges you if you want to be able to read all the stories on their platform. But once you do, you'll be one of their privileged users.

Joining Tinder Select

Tinder uses the "Elo" ranking system to rate members based on desirability and invites the top ones to join the closed version called Tinder Select. Even though a bit cynical for the rest of the pack, it does what it's suppose to do: reward popular users by making them feel unique.

It is controversial but it shouldn't be

If suitable for the product we design for, scarcity can optimise user flows and impact business goals. It reframes information and alerts users when there is a need for urgency.

Some might argue that this forces them to make a decision, but as long as the numbers are real, what's the alternative? Isn't the sense of regret or frustration caused by us failing to tell them about the scarce product in time just as bad? Aren't we offering an awful user experience if that happens? Rushing people into making a decision seems rather fair as long as we're presenting them the facts.

Having said that, I agree that some businesses take advantage of this and use it unethically by inventing fake stocks and artificial memberships. But this is true for any other method used with questionable intentions and it always leads to loss of credibility in the long run.

It should follow a few rules

To avoid this, below are some suggestions for making the best out of scarcity and actually improve the UX:

Do

use scarcity to increase perceived value and expedite conversions

use time scarcity to promote products that are time sensitive

use quantity scarcity to make people aware of stock shortages

use access scarcity to highlight the advantages of the restricted features

use A/B testing to test what scarcity message works best for your audience

use usability testing to test the impact of messages on credibility and trust

use animated elements to emphasise urgency (e.g. showing a glowing red icon to highlight the real-time status)

Don't

do not use scarcity without testing it first with users

do not use scarcity if stocks are not reliable

do not use scarcity if the messages are not bug free

do not use fake numbers to create artificially scarce products

Conclusion

Scarcity makes us place a higher value on things that are scarce and, over time, has become the go to method for increasing desirability. It is powerful because it combines multiple biases (Loss aversion, Social proof and Anticipated regret) and it comes in different forms (Time, Quantity and Access).

It is controversial but it shouldn't be because hiding the information from people is not really an option. It can also improve UX if you follow a few simple rules.

Clapping is caring. Press the 👏 to share this article with others.

# data[].attributes.attachment_link.title
Scarcity in UX: The Psychological Bias That Became the Norm

# data[].attributes.attachment_link.description
Short analysis on the current state of affairs and a few tips to keep in mind. You know how it works. Casually watching a review on Unbox Therapy about this mug that apparently is unspillable. I'm having a laugh but by the end of the video I'm also intrigued what people ask for it.

# data[].attributes.attachment_link.readable_text
Good data visualization is all about conveying information clearly, efficiently, and without distraction. Here are some tips to help you do just that.

Avoid using bright colors

Bright colors can have the same effect as USING ALL CAPS. Your audience feels like you're screaming at them. And when someone is screaming at you, it's usually hard to focus on what they are saying. Duller colors, like those found in nature, work well for data visualization because they allow your audience to comprehend your data without being overwhelmed by it.

You can use brighter colors when you want to emphasize data, like how your company lines up with competition, or you can just use a darker hue of your existing color palette.

Avoid pie charts

Despite their popularity, pie charts are not an effective way to visualize data. Why? Because it's hard for your brain to determine the relative size of each piece of pie (a topic covered at length by Stephen Few). Try using a bar graph instead. It makes it easier for your audience to understand and compare the relative size of data.

Pro tip: Sort your data in descending or ascending order to make comparing data even easier.

Hide or mute things that are not data

As Edward Tufte, the "Leonardo da Vinci of data," explains,

Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.

He calls this achieving a high "data-ink ratio." Take a note from Tufte and minimize or remove anything that is not essential. This includes softening or removing graph lines, muting the color of axis lines, graph lines, and delineate spreadsheet rows with light gray. Your audience will thank you.

Pro tip: If anyone comments on your non-flashy graphs, just tell them that you're optimizing the data-ink ratio.

Use simple, legible fonts

There are times when typography can elevate a visual, adding additional emotion and insight. This is not one of them. Stick with simple, sans-serif fonts (often the default in programs like Excel). Sans-serif simply means "without serifs." Serifs are those small little feet at the bottom of fonts.

Use a font with tabular figures

Tabular spacing gives all numbers the same width so they line up underneath each other, making comparison easier. Most popular fonts have tabular figures built in. Not sure if your font does? See if your decimal points (or any number) line up when on top of each other.

Use the appropriate level of detail with numbers

The more detail (and digits) you add, the longer it takes your brain to process. So think about what you're trying to convey with your data and what the most effective way to do that is.

Stick to the basics

A good rule of thumb to follow is, if you can't understand it, you're audience probably can't either. So stick to the basics: histograms, bar graphs, Venn diagrams, scatter plots, and line charts.

# data[].attributes.attachment_link.title
Data visualization hacks - UX Collective

# data[].attributes.attachment_link.description
Bright colors can have the same effect as USING ALL CAPS. Your audience feels like you're screaming at them. And when someone is screaming at you, it's usually hard to focus on what they are saying. Duller colors, like those found in nature, work well for data visualization because they allow your audience to comprehend your data without being overwhelmed by it.