# data[].attributes.attachment_link.readable_text
Here you can learn more about UX laws:

3. Every design starts with the research -

When i say research, I mean understanding the system thoroughly. How to do that? -

Browse: What is available on the internet about it, who is doing what or where is the market going.

Observe: Are you trying to improve the coffee shop experience? Then visit that cafe. Are you trying to improve buying vegetables experience, then go to Walmart, Target. You cannot know the system by sitting at your desk. Understand the existing experiences. Take notes. Types of observation methods include Fly on the wall, Shadowing, contextual inquiry, undercover agent. Find more about them in Dan Saffer's book mentioned in the beginning.

Talk to people: You will gather insights which you have never expected before. The 'aha' moments. Keep the questions open ended. And try to keep the interview location where the interviewee is most comfortable at - where they work, live, eat etc. Keep it concise.

A few methods include Directed storytelling, Unfocus group, Role playing, Extreme user interviews, Desk/purse/briefcase tour and 100 other ways...literally! To learn which methods should be used where, check out one of my favorite books:

You can also read about the research methods in Dan Saffer's book.

4. Analyze and Synthesize the research

This is the process of organizing and evaluating research data:

Immediately after the interview, review your notes.

Get all the insights from your notes on sticky notes.

By now there would be a shitload of sticky notes. Now it is time to create some meaning out of this data. Start by finding relation between two insights. For e.g. In coffee shop research, two insights might say, "I like the ambience", "i come here work everyday because it is quiet and has a slow music. Don't feel like leaving".

Start clustering the sticky notes. Look for insights with similarities. In coffee shop research example, one cluster might be based on "coffee shop ambience". This is how you find patterns.

Now generate one statement per cluster. For e.g. "People like going to XYZ coffee shop to enjoy the ambience". This could be your clustered insight.

For all these "statements" (clustered insights) now it is time to convert them into a particular form of question statement- "How might we...". For e.g. "How might we provide better ambience experience to people coming to XYZ coffee shop". This helps us generate ideas with an open mind with lesser biases. Read more here.

Find all the methods mentioned in Dan Saffer's book.

5. Think from others perspectives

Always think from the perspective of the customer/user/audience (or whosoever your design is for). Make this a habit. It will be helpful at every step of the process. If you are interviewing a patient, try to be in their shoes and feel their pain. Empathize with them. This is a great way to overcome our own life biases and build something FOR THEM. Apply this superpower in every aspect of your life.

Are you building your portfolio? Think what if you were a recruiter, What would you need from a portfolio? How much time would you have per portfolio? What would you be feeling? etc.

If you had an argument with fellow designer/developer, think what were they feeling in that scenario? What were you feeling (self-empathy)? What could have been their intention, your intention? What does that situation reflect about your self-image, their self-image? Next time, how could you have prevented it?

Watch this video to learn more on empathy

6. Think in systems

While paying attention to details, do remember to look at the bigger picture as well. Sometimes when we digging deeper into the details, we overlook how it affects other elements in our system. Whenever an action takes place, one way is to look back to the system structure and analyze what has changed in the system and which elements get affected by that.

You can read Meadows' Thinking in systems or read this article that describes how to find the leverage points in the system to intervene.

Have a look at this video that explains how World Health Organisation (WHO) created even bigger problem while solving relatively smaller problem.

We also discussed how it is important to think from users perspectives. Now it is time to design for that! User conceptual models are a great way to consolidate all the ideas into a structure.

Conceptual models help us (designers) think what is necessary for the user to know about the product.

Check out the last two projects on my website to learn how to use conceptual models. My website includes various type of Systems design projects: Application systems, Feedback control systems, Dynamic systems, Automatic control systems, Product systems etc:

Tools: I use Kumu, a free tool, to design system maps. Overflow to present map screen design.

7. Rapid prototyping - Secret of Innovation

Don't prototype, but "pretotoype". Get your hands dirty. Start with prototyping as early as possible. Some designers even start with prototyping along with the research. You can call sticky notes on top of a blank sheet as your "website prototype" and that's fine! Point is, the quality doesn't matter at this stage. Because your first draft is always wrong. But it will be quick and inexpensive which will give you authentic reactions. It's the cheapest and most efficient way to test the ideas.

In theory, Interaction design follows a double diamond process . But in reality, its pretty much an iterative process. Therefore, the secret mantra of successful products is:

Watch these paper prototype and power of prototyping lecture videos by Scott Klemmer from the free course on Prototyping.

8. Usertest - Show than tell

Obvious is not always obvious. We tend to get biased towards our designs. I have seen even the good designers to make the mistake of testing the prototype once it's "ready", and by "ready" they mean 'clickable'. But usually, it's already too late to test.

Once it is on the paper, it is ready! And testing should happen throughout the design process. Create a flow - show it to the people, draw some sketches - show it to the people, create wireframes - show it to the people... At every step, take their authentic feedback. You will be learning a lot from them. "People" can be users, other designers, engineers, other stakeholders etc.

And I am a big fan of guerilla testing. It is a method of testing your product with people sitting alone in cafe's, restaurants etc.

Check out this article explaining how to do guerilla testing:

Also, have a look at this years old video of Jakob Nielsen, where he talks about how to conduct a simple test.

9. The wonders of storytelling

I cannot tell you how important this is. Storytelling is the key to success. Whatever success means to you...

Our (users, designers, stakeholders, all humans, may be aliens too...) brains are wired to express our thoughts through this powerful tool of storytelling. This secret power extends to researchers, strategists and designers. Whether we (Interaction Designers) talk about doing research, creating the visuals, designing a prototype, making a video, or a client presentation or your own portfolio, we always...always need to tell a good story - a story that the audience can relate to, that can create a 'conflict' in their minds, that can make them wonder and eventually change their perspectives. I will talk more about storytelling in my next blog post.

Check out this amazing talk by David J Philip on storytelling.

And watch this Ted Talk by Filmmaker Andrew Stanton of 'Toy Story'.

So, how do you tell story in non-fiction work life?

Read this awesome book Story Craft by Jack Hart and read on hero's journey. Here is amazing article describing different ways of building a narrative arc:

10. Collaboration is the key

Collaboration is another form of interaction design where the interaction is between human to human.

And from my experience I have learned that talent can only take you to a certain level. But with good collaboration and communication skills, sky's the only limit. I personally used to focus lesser on this aspect. Hence my performance was plummeting in group projects even though I was doing pretty well in the solo projects. And btw, most of the projects in any company are within teams.

In such situations, we justify the situation explaining ourselves that co-worker has shallow subject knowledge or their egoistic nature is the hinderance. That's what many of us think. But, fortunately, it's never anyone's 'mistake' rather it's our inability to interact and collaborate with each other that we feel unsuccessful or exhausted. Which we can learn. How?

Pay attention to what teammates are saying. Listen to them. Think from their perspective. Give importance to their opinions. Sometimes you need to sacrifice your good ideas for the greater good of the team. Time is the key, you cannot do everything on your own, at least not as fast as a collaborative team would. 1+1=11
So, if you are a designer, you need to design, not only your product, but also your methods of communication with others.

# data[].attributes.attachment_link.description
Here you can learn more about UX laws: When i say research, I mean understanding the system thoroughly. How to do that? - Browse: What is available on the internet about it, who is doing what or where is the market going. Observe: Are you trying to improve the coffee shop experience?

# data[].attributes.body
Een interaction designer is iemand die zich bezighoudt met de structuur van interactieve systemen en het bijbehorende gedrag van gebruikers. Het vakgebied interaction design (of kortweg 'IxD') richt zich op het creëren van diensten en producten die bruikbaar, nuttig en betekenisvol zijn voor gebruikers.

# data[].attributes.attachment_link.readable_text
Definition of IxD

It is a process which is used to create engaging experience with the help of logical behaviors and actions of element or components. It is based on how application interacts with the user giving maximum value and satisfaction. IxD is truely a main component for creating best user experiences.

Let us check out the main five pillars for Interaction Design:

1. Goal Driven Design

Personas: User research is very important to know the real scenarios and related problems. Who is the actual person who has the problem?

User Stories: What we want to achieve through our persona should be well defined by user stories. User stories give logic to our thoughts making the design perfect.

2. User Expectations

Let's study human psychology in accordance with newton's law a bit to know the movie better.

Newton's third law says: For every action, there is an equal and opposite reaction. Human brain is well versed with this law resulting expected reactions to his actions. Let's dig deeper a bit. For example, if you throw a coin into the air and let it fall on the floor, your brain expects tumbling sounds of coin when it hits the floor. This is the same case when a user comes to a application and performs some actions expecting some reactions from the product. Facebook does a very good job regarding this. In native app if a user taps like icon it gives a very beautiful plup sound giving a satisfying result. User gets to know immediately that he performs some action. Let us see one more case. If a user fills some form and clicks 'Done', he expects some confirmation alert or error message if something is wrong with any of the fields. This is what Interaction Design is all about.

3. Usability

There should be less attention to figure out how to use the application so that user can focus on completing the task. Product should be very easy to use and easy to understand its functions.

4. Utility

It is the most important factor focusing on 'Does user find the function useful?' or 'Is the function important or is it designed to give high quality UI factor only?' The function should solve some problem or purpose then only it is useful to the user. There should be a very logical reasoning behind the function to complete a valuable task.

5. Affordance and Signifier

Function which speaks for itself and suggest its own use is affordance. Signifier hints at the affordance of the particular function and suggests how to use. For example, we see a door it tells us it can be opened. Door speaks for itself that it has a function that it can be opened. And now we look at the door knob which signifies the door opening, supporting affordance and telling how to open the door.

# data[].attributes.attachment_link.title
5 Pillars of Interaction Design(IxD) every designer must know about... A very big UX factor...

# data[].attributes.attachment_link.description
It is a process which is used to create engaging experience with the help of logical behaviors and actions of element or components. It is based on how application interacts with the user giving maximum value and satisfaction. IxD is truely a main component for creating best user experiences.

# data[].attributes.attachment_link.readable_text
When users open a website or app, they first notice the obvious design elements: logo, colors, icons, illustrations, and imagery. While these elements do contribute to the overall user experience, they are actually pieces of a larger puzzle: interaction design. This concept can be more subtle to end-users than a flashy, new homepage, but it is essential in creating an engaging, intuitive digital experience.

What is interaction design?

Interaction design is about facilitating interactions between users and products (most often, those products are apps or websites). According to the Interaction Design Foundation, "the goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible." In other words, interaction designers are responsible for creating every element on a screen that a user might interact with, whether through clicking, swiping, tapping, or some sort of action.

The five dimensions of interaction design serve as a helpful model to understand what it involves. First introduced by Gillian Crampton Smith, an interaction design academic, the model only included four dimensions. Kevin Silver, a senior interaction designer at IDEXX Laboratories added the fifth.

1D: Words should be simple to understand and should communicate the right amount of information to the user (too much detail can overwhelm, while too little information can cause confusion).

2D: Visual representations, like images, typography, and icons, should supplement the words to communicate information to the user.

3D: Physical objects or space refers to the actual hardware and objects that a user interacts with. For example, are they using a smartphone or a laptop with a mouse? And where are they, at their desk or on a crowded subway?

4D: Time refers to how users might measure progress, with sound and animation for example, as well as how long they spend interacting with the first three dimensions.

5D: Behavior was added by Kevin Silver and includes how the previous dimensions define the interactions of a product. It also includes the reactions of users and the product.
Related: 6 reasons why UX designers should explore gestural interaction
10 examples of interaction design

What does design interaction look like in real life? Here are some of our favorite examples found on Dribbble.

By Jony vino. Splitting the bill with your friends isn't always as easy as it seems, especially if you're more of a visual person than a numbers person. This app concept lets you input the total bill, select the tip percentage, and then see how much each person will pay. The best part? Instead of manually adjusting each person's part and having to constantly update everyone's share, you can simply resize each person's section in the app and the numbers will automatically recalculate for everyone.

By Prem Gurusamy. On most e-commerce sites, you have to navigate to a completely different part of the website or app to view your cart. With this interaction, you can instantly see your items "fly" into your cart as soon as you click the "Add to cart" button. The cart continues to visually surface your items, even as you explore other parts of the site.

By Igor Pavlinski. Social media apps are notorious for information overload, showing you all the top stories, trending videos or articles, and breaking news at once. This concept for a new social media app puts the control back in the user's hands, organizing content by source (like YouTube, Vimeo, Twitter, or Reddit) and letting you choose which channel to explore. This card-like layout also eliminates the need to jump between apps to consume your favorite content. Instead, it's easy to alternate between sources within the same experience.

By tubik. There are a million and one ways to customize your burger. And when you're ordering on your smartphone, selecting each individual ingredient on a small screen can be an exercise in dexterity. This UI concept for the Tasty Burger app simplifies the ordering experience by bucketing ingredients by type. Instead of displaying a long list of every possible variation of cheese, produce, meat, or bun, you first click the category of ingredient (like cheese) and then you are presented with the different types, like gouda or comte.

By Rahul.Design. If you're house hunting and can't see the property in person, the next best option is to get a virtual tour. This concept for real estate app, Spec, leverages our natural behavior when looking at a new space. You can click into any room, like the kitchen or living room, and move your phone to get a 360-degree view. It's easy to switch between rooms with just a single tap.

By Forest Plasencia. Filters offer a powerful, easy way to surface different slices of information. But, the problem with a lot of filter interactions is that they open a popup or new page in the app, hiding the very information you want to filter. This micro-interactions keeps everything in the same view, even when you do filter. This way, you can see the data change instantly when you select different filtering criteria.

By Dmitro Petrenko. It's easier than ever to arm and monitor your house thanks to smartphone apps, but between 94%-99%
Related: Creating a tool that records user interactions
By Gil. This simple page interaction improves the user experience on-site and helps the company keep visitors on their pages, longer. The main purpose of the site is to showcase how these properties can be used in nature, as an office, and as extensions. Instead of creating separate experiences for each purpose, this page mimics the user flow of comparing and contrasting the different uses, and seamlessly bouncing between them.

By Dominik Martin. Interactions don't need to be bold and noticeable to make an impact. This app concept simplifies a behavior that we all despise - picking our country of residence from a long list. Instead of having users scroll through the list and find their country, this micro-interaction first has you pick the first letter of your country and then find it from a much smaller, focused list of countries.

By Mykolas Puodziunas. More and more retail sites are making it easier for you to "quick view" an item, rather than clicking into every detail page and then having to back out to the search results to browse more items. This concept takes it one step further and lets you view each product in its different available colors, without having to leave the category page.

Did we miss your favorite interaction design example? Share it with us on Twitter: @InVisionApp.

# data[].attributes.attachment_link.description
The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible. Here are 10 great examples.

# data[].attributes.body
Vormgeving van gebruikersinterfaces: ontwerp van het raakvlak waardoor mens en computer communiceren;

Mens-computerinteractie: een onderdeel van de informatiekunde dat zich bezighoudt met onderzoek naar interactie.

Informatie-architectuur: de structurering van gegevens;

Vormgeving van informatie: communiceren van betekenis door middel van grafische vormgeving;

Industriële vormgeving: het ontwerpen van producten voor serie- of massaproductie;

Ergonomie: de studie van de mens in relatie tot zijn omgeving;

Contentstrategie: de planning, ontwikkeling en het beheer van tekst, afbeeldingen, video en andere media.

# data[].attributes.attachment_link.readable_text
These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we'll answer both of those questions and offer a showcase of some great interaction design work.

Interaction Design 101

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.

" Introducing Interaction Design " breaks the field into five pieces that are still useful and relevant today:

Human/machine communication is the translation of conversations between the device and user.

Action/reaction looks at how interactions happen and unfold.

State ensures that users know what is happening and why in terms of the application.

Workflow ensures that users know who to use a tool or application and what happens next.

Malfunction takes into account mistakes that are bound to happen.

Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.

What can a user do with their mouse interaction, finger or stylus to directly interact with the interface?

What commands can a user give to interact with the interface?

What about the appearance gives the user a clue about how it functions?

What information do you provide to let a user know what will happen before they perform an action?

Are there constraints to help prevent errors?

Do error messages provide a way for the user to correct the problem?

What feedback does a user get when an action is performed?

What is the response time between an action and response?

Are the interface elements a reasonable size to interact with?

Are edges and corners strategically being used to locate interactive elements?

Are you following standards?

Is information chunked into a few items at a time?

Is the user end as simple as possible?

Are familiar formats used?

Role of an Interaction Designer

If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.

An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.

This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.

The career paths of interaction designers are varied. Some formal design programs are teaching it. Others come into it from experience or by chance. But one of the common traits of interaction designers are a thirst for how things work, not being afraid to ask questions and an ability to visualize and play with elements and concepts in new ways.

Interaction Design Concepts and Principles

So what really pushes forward the field of interaction design? What makes it different from just design? That line is pretty blurry. We mostly talk about interaction design because it carries weight and focus. But the reality is that interaction design is just one piece of good design in terms of digital, web and application design and development.

The " Complete Beginner's Guide to Interaction Design ", published by UX Booth in 2009 is still a great reference. While some of the key players and tools have changed the concepts that drive interaction design are the same.

Here's a look at each of those concepts:

Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.

Interface as magic: You don't even really see the best interfaces. "The best interaction designs don't exist: they don't take a long time to load/respond; they don't make users think; and they don't give user's cause for grief."

Usability: "Interfaces which make the state of the underlying system easy to understand and use are favored."

Affordances: "The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function."

Learnability: "A great deal of what comprises a usable interface is made up of familiar components. ... The best interaction designers don't reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns."

Interaction Design Showcase

So we can't talk about interaction design without showing some great examples of work happening around us. Each of the projects or shots below is something that gets to the heart of what this concept s all about. Make sure to visit the links to really learn more about how each of these projects (or shots) came together and work.

Move Product by Barthelemy Chalvet (AgenceMe)

Weather App by Sergey Valiukh

Fiche by Barthelemy Chalvet

Material Design Animation

Mobile Animations & Interactions

Team Messages by Jan Losert

Float Label Form Interaction by Matt D. Smith

iOS New Gestures by Javi Perez

Qards Contact Form by Sergey Shmidt

Nike by Owi Sixseven

Android Wear by Ramotion

Apple Watch by Jakub Antalík

Interaction Design Resources

There are plenty of great and worthwhile resources out there on interaction design, tolls and jobs for interaction designers and the field in general. Here are a few places where you can start learning even more about interaction design:

Conclusion

Users expect interactive experiences on modern websites. There is no way around it. In order to keep current and keep users coming back, having such interaction is necessary.

Having someone on your team who is responsible for managing, creating and monitoring these interactions is equally important. You will need an interaction designer.

Think about it. Is that person on your team already? If not, what do you plan to do about it? We'd love to know what you think about interaction design and if there is a dedicated interaction designer on your design and development team. Share your thoughts with us in the comments.

Carrie Cousins has more than 15 years of experience in media, design, and content marketing. She's a freelance writer and designer and loves helping brands and businesses build amazing things.

Posts by Carrie Cousins

# data[].attributes.attachment_link.description
These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we'll answer both of those questions and offer a showcase of some great interaction design work.

# data[].attributes.attachment_link.readable_text
User Interface (UI) Design, User Experience (UX) Design, and Interaction Design (IxD) are three associated terms often used interchangeably. Have you ever wondered whether there is really a difference between UI Design vs UX Design vs Interaction Design? Well, there are differences among them. This article explains the relationship between these terms and their job prospects.

UI Design vs UX Design vs Interaction Design: Similar but different

UX Design: UX Design is a higher order concept that encompasses numerous design aspects along with a user's journey on a system, platform, software, or application. It includes UI design, Ix design, communication design, application design, information architecture and more. The goal of UX design is to facilitate the best feeling a user receives while operating on a device.

Interaction Design: IxD is "the practice of designing interactive digital products, environments, systems, and services". It focuses on designing the flow whereby a user could locate information easily while enabling the achieving of her information goal in each interaction. The notion of usability in a digital product is often associated with good interaction design.

UI Design: UI Design is the design of interfaces for devices, and is focused on the graphics creation aspect.

What exactly does a UX Designer or a UI Designer do?

While the terms UX Design, Interaction Design and UI Design can be very confusing at times, the role of UX Designer and UI Designer are more clear-cut. The comparison for the role of Interaction Designer is left out on purpose as interaction design is normally part of the daily job of a UX Designer.

Do not follow the textbook definition or the expert definition!

There may be some standard definitions of UX Designer/ UI Designer from Wikipedia or industry experts. However, do not assume that those will be your job responsibilities when you are applying for a job.

Each role for UX Designer or UI Designer is unique due to the fact that every company has different team structure and varying needs. Therefore, instead of trying to get the correct definition, do more research on the company you are applying for. Use the top-down method in your research:

1. Start with the big picture. In addition to the company name, you should also read about its products and services.

2. Read every word of the job posting carefully.

3. Go to LinkedIn and hunt down the employees with the similar role to read their descriptions. Set your profile to private if you want to stay anonymous.

4. Alternatively, you can also try Glassdoor. Albeit its smaller pool of user base, the reviews are usually more honest and insightful than in LinkedIn. You will get a peep into how it is like working in the role.

General Job Scope of A UX Designer and UI Designer

In a small team, a UX Designer will need to take up more functions and responsibilities due to the limited resources. Nonetheless, this is a tremendous opportunity for your career. You will get the chance to see the big picture of UX process. On the other hand, a big team will normally be more established with more mature process and techniques employed.

Regardless of whether you are a small team or big team, your main bulk of work as a UX Designer should fall under one of the UX processes:

User Research

Design (Persona, user journey map, storyboard etc)

Wireframing and Prototyping

Testing

On top of the UX processes, you will also liaise and communicate with product manager, developer, UI developer etc to achieve the same business goal.

As for a UI Designer is usually responsible for everything related to design from UI elements (icons, tabs, menu etc) to UI prototype.

Conclusion

UI Design vs UX Design vs Interaction Design are different but interrelated. UI Design is a subset of Interaction Design while Interaction Design is a subset of UX Design.

In recent years, the role of UX Designer is getting popular and in high demand. While each company has its own job description for UX Designer, you won't go wrong assuming that it will revolve around the key UX processes.

# data[].attributes.attachment_link.title
UI Design vs UX Design vs Interaction Design - UIUX Trend

# data[].attributes.attachment_link.description
User Interface (UI) Design, User Experience (UX) Design, and Interaction Design (IxD) are three associated terms often used interchangeably. Have you ever wondered whether there is really a difference between UI Design vs UX Design vs Interaction Design? Well, there are differences among them. This article explains the relationship between these terms and their job prospects.

# data[].attributes.attachment_link.readable_text
The reason this works in movies and video games is the short time these images are being displayed for. They call for a superficial impression, not diligent study. Combined with purposeful animation, 3D becomes a powerful design tool.

The mobile industry with new powerful chips made it possible to not only render 3D objects but use them within the interface. Smaller screens are perfect for that.

Flat UI design has been a dominant trend for over 5 years and hasn't really changed. Lately, we've witnessed a clear shift towards adding depth and dimension to flat design without changing its main idea. Why depth is necessary is also why flat design came to exist - we need symbolism to make sense of everything. Flat is symbolic to the core.

Deep flat is the new flat.

Real 3D and CG combo revealed a customer response to life-like objects that they can interact with. Flat design is also capable of doing that in a unique and yet-to-be-explored way. They call it pseudo 3D. It's flat layers stacking up to create a three-dimensional feel. The main asset adding dimension to flat design will be shadow and light positioning, and reflections.

There is also a fake 3D trend on the rise which uses conventional design tools like Principle and After Effects to create motion pattern emulating 3D.

In 2019 we might even see the return of skeuomorphism in a new fashion. If flat can be deep, it can be isometric as well. Retaining flat symbolism while tapping into a realistic view is a trend to explore.

😑

Yeah, but we will eventually run out of options. Already, there is no certain direction 3D UIs are moving towards. It goes both ways - simplification and sophistication. While it takes more technological effort to impress us, it takes just as much courage to throw complexity out of the window and roll out a crazy concept. However, if the most complex interfaces lack meaning or the boldest ideas are nothing but a curtain wall, all the efforts will be useless.

We can do impressive imagery. It's time to fill it with sense for humanity and address deeper issues. How can we make this happen?

All the 3D and motion design opportunities brought by better technologies don't mean a thing if they fail to make an emotional impact. Ironically, you don't need complexity to make the most impact. The reason why renegade attitude has always been a satellite of mainstream trends is its natural appeal.

We need something to balance out the common sense, we need a devil on our shoulder, and sometimes we are playful.

Some of the biggest redesign campaigns and associated illustrations came out as playful as it gets:

This cartoonish style of illustration and even UI has one purpose - maintain freshness of the look. When your brand name is a staple, you can surround it with a never-ending buzz. Doesn't matter who this style speaks to, it has to be weird or even ugly. Expect to see more of that vanguard and surreal design in 2019.

😑

Yeah, but not all companies and products can afford this impudence. The wider the audience, the more neutral the design has to be. Even though this might work for established brands, smaller companies and the ones struggling with exposure will have to play it safe and stick to commonalities.

Build a following first, and then take them for a ride.

New screens have a fantastic rendition of colors. They even have to show this through default wallpapers. Designers explore the boundaries of accessibility and impressive gradients in UIs.

Gradients are no longer for attention, they are now bringing depth and dimension to the interface.

Gradient 2.0 is subtle and simple. It uses no conflicting colors. It has a clear light source and it aligns with the shapes to bring depth.

Vibrant colors aren't going anywhere. We will see more combined colors and layers. In fact, even the monochrome palette will present some sort of visual aesthetic through depth and dimensioning.

We lack trust and optimism. Blazing colors promote positivity. Would you trust a crypto app like this?

Even cooler is the fact that vibrant colors and meaningful gradients stand out better in the dark background. Dark themes are here to stay and they will only get better. Here, we took an anthropological approach to figuring out dark themes and why they work. Those who can find the balance between the accessibility of dark UI and emotive response of glaring colors, will be on top next year.

Deep flat, colors, and 3D, in the dark.

😑

Yeah, but accessibility is not the only problem with gradients, colors, and dark themes. Bright colors are traditionally used to enforce accents. When everything is color, how can you emphasize? Not all users have access to OLED screens. Some of the gradients can be lost. Too much contrast can impede user's focus. Dark themes don't work on a sunny day outside. That might actually be a good thing though.

Traditionally, typefaces are perceived as static entities with a limited set of adjustable parameters. Designers and writers have to consider legibility in the context of x-height, stroke and letter width.

Whenever the design requires multiple typefaces, designers have to provide all the files for the font styles used. You can't fully commit to rich typography in a product unless you cover all the bases. With variable fonts you just need one file because variable or generative fonts provide infinite number of letter weight and width adjustments.

Variable fonts can cover any portion of the design space left for the text.

Variable fonts thrive in responsive design and localization. In the places where designers had to rack their brains about fitting text into smaller screens without losing the zest or stretching it for a different language which utilizes less characters.

When web fonts were introduced, responsiveness was an aspect they were lacking. Not enough flexibility resulted in legibility issues and misalignment of the design itself. Variable fonts are fairly recent and they help deliver fonts for the web faster and help streamline design process in general.

And that's just the beginning. The artistic options of variable fonts are yet to be explored in 2019.

😑

Yeah, but how long till a smart and adjustable font becomes a means of promoting a sell? If you can have your text replying to the subtleties of every digital context available, how does it protect a reader from manipulation? Parametric text has roots in book printing which is a context limited by objective physics. This prevented people from saving on paper and ink and also made reading one of the most important reasons for our progress.

Today we ask the age-old question: "do designers need to code?" And then, "do developers need UX knowledge?" The point of these is simple - avoid pain and discrepancy implementing the design. So if it's about the purpose, it should also be about ways to get there.

Learning to code is a logical option. If you are the one who executes your own design, you avoid a bunch of issues. However, the amount of knowledge you need to maintain to be a relevant designer and a potent developer is exceptional. Can you do it? Good for you. For those who can't, there should be other options.

The purpose is not breeding a universal designer. It is about building better products, with delight.

Another way to achieve this goal is to use and promote better tools. Figma is one of those tools. Before, designers had to consider a lot of variables like operating systems, integrations, plugins, storages, synchronization, collaboration, and finally, ways to assemble them all in one place. Those who did develop a workflow, deserve all kinds of respect. But we want less stress.

Figma is a for-us-by-us design tool. It anticipated a lot of what-ifs and stuffed a lot of skepticism.

Figma destroyed Sketch.

It does everything Sketch and Adobe XD does but more and better. More importantly, Figma is aimed at building what will be implemented. Every Figma component can be turned into a React component via API and implemented on the front end. So far, Figma beats competition in cost, performance speed, collaboration, sharing, embedding, support, and so on. With that said, Figma is still developing and in 2019, there's more to come.

😑

Yeah, but whenever we develop better products and fail to establish ethical use of the above, we only contribute to our own demise. Look at Twitter that is struggling to gain back its good name. 2018 was fruitful in tech executives testifying in court. Turns out, it's not enough to put tools out there, we also have to watch how people use them. Will Figma protect users from dark patterns in UX, bad design, and fake news?

Design does not have to be visual or visible to work. Through bumps and bruises, we realized that tools don't really matter if we are building experiences that are not tactile. Designing logic means operating psychology. Building voice controls means dealing with natural language processing.

Voice UI is as sensual as it is sophisticated.

Voice UI realizes the concept of no UI to its finest. The process is internal and has more to do with writing, building context, and synthesizing data, than with actual design. Even so, designers are obsessed with finding ways to represent voice UI. Mainly it comes through impressive minority-report-like interfaces and animations.

Most of the times they have nothing in common with the reality of voice interfaces but they prepare a user for the absence of controls and teach them how to treat technology that does not need any.

In 2019, we can hope to witness the deepening of the voice UI knowledge as more designers transition to meaningful experience from plain visual aesthetic of design.

😑

Yeah, but the biggest challenge with voice UIs is, ironically, not the human-to-machine interaction, but the human-to-human one, mediated by technology that has to be smarter than the two. We live in a massively imbalanced global society. We are struggling with the understanding of one another on many terms, technology included. Voice-controlled phones, cars, and homes might just broaden the gap between us.

As designers, we should always consider well-being of humanity as our top priority. If technology, even the beautifully designed one, serves some at the expense of the others, it has to be tackled relentlessly. That's not happening.

Last year, designers started paying attention to the meaning of the words that bear typefaces. Fiction and tech writers, epistolary hobbyists, and journalists got an adjacent industry for their skills. One thing led to the other and we defined the role of writing in design:

You have to be in control of the way your business talks to your customers.

Before, there was a mix of pompous narcissistic bullshit and technical nomenclature. Things a business was doing was mistaken for the value it could give its customers. Even though businesses were great, they suffered from the lack of definitive, simple, and persuasive wording to use with their audience.

UX writing is based on two simple principles: be respectful and be useful. Everything else stems from them. Being concise means respecting people enough to value their time more than yours. It's you who has to die over the text, not the user. Being clear means avoiding being twofold, protecting from bad experiences, thus, being useful. Being expressive means being truthful and hiding no flaws. Always focus on helping a user first, don't show off your eloquence, don't SEO it, and never use marketing cliches - enough is enough.

UX writing is easy once you embrace being respectful and useful.

People don't want to see you flex and promote yourself. They want to know if you can help them. Make your service do the talking.

In 2018, we've witnessed a noticeable rise in voice and tone design in major companies. They stopped pursuing ingenuity and focused on customer value. In 2019 we are yet to see the development of UX editing is a design discipline.

The difference between UX writing and UX editing is the bandwidth. UX writers produce user-facing text. UX editors analyze, morph, bend, and twist any copy to turn it into a simple humane text. There is no crash course for UX editing. It is experience, observation, and kindness.

Every major redesign campaign in 2019 will require a UX editor.

😑

Yeah but every trend goes through a set of stages. The first one is skepticism, then fascination, and then, bore. Fascination is the most dangerous because it often gets out of hand. It can turn the idea into a caricature and distort the value. UX writing is no different. When being simple is mistaken for dumbing down. When being clear becomes impudence, and being persuasive turns into condescendence.

There is still a place for creative writing in product design. But not where the product meets a user. For example, Nike and Boeing are paying sci-fi writers to predict their futures.

UX design is a very broad term. It is a part of service design which is cross-industrial. As the result, designers and design firms gather extensive portfolios of projects ranging from simple utility apps to complex FinTech platforms.

Service design is a blanket. It can cover every industry and apply what works universally.

Service designers can have their own style which they can apply to any product. That's what they get famous for and that's what businesses are willing to pay for. It's like buying parts from a respected supplier.

However, most companies are product companies and they might require a deeper level of understanding from a designer. These companies require a product designer who is integrated deeply into the team, has all the data available, and all the tools to influence the system as a whole.

Product design has a significant advantage over service design. That's the access to the analytics and the ability to test design decisions live.

Product designers have the ability to focus on the specifics of the product they are associated with and let go of everything else. They are deeply informed about the user demographic they are designing for and have real data to operate on, as opposed to the assumptions most service designers have to work with.

😑

Yeah, but transitioning to product design requires vigor. By risking to immerse yourself with a certain industry or a product, we are making a choice that we might never return from. In that case, the decision has to be factored. We have to consider the viability of the industry and the perspectives of the professional development within it.

Fortune favors the brave and in 2019, we'll see even more dedicated designers taking a shot at becoming specialists and sacrificing their universal skills. Time will tell.

Finally, the greatest trend we are starting to notice is a gradual shift towards sincerity. There's only so much trickery you can resort to. Nothing beats good intent and design has good intent in its core.

# data[].attributes.attachment_link.description
The reason this works in movies and video games is the short time these images are being displayed for. They call for a superficial impression, not diligent study. Combined with purposeful animation, 3D becomes a powerful design tool. The mobile industry with new powerful chips made it possible to not only render 3D objects but use them within the interface.

# data[].attributes.attachment_link.readable_text
Interaction Design is one of the many facets of User Experience Design. The Encyclopedia of Interaction Design defines it as "shaping digital things for people's use." It's a complex and wide ranging field that covers nearly all aspects of cognition, emotion, and behavior.

It's about designing for the entire interconnected system: the device, the interface, the context, the environment, and the people. According to the Interaction Design Association, Interaction Design "defines the structure and behavior of interactive systems." Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers, to mobile devices, to appliances, and beyond.

Interaction Design principles are important to keep in mind as we develop complex applications. Teams that have an understanding of these basic principles will positively contribute to the overall user experience.

1. Consistency

We are wired to be sensitive to change. Changes to a layout attract our attention. As long as persistent elements remain in the same place, retain the same appearance, and adhere to the same grid layout and proportions, we do not direct attention toward them until we need them. But when elements move and change appearance without purpose across pages or screens, it becomes immediately noticeable.

If people are asking why something is the way it is, or why it is different, then they've been distracted by the interface. When designs are consistent in appearance and behavior, people are able to focus on their tasks, and they're not distracted by surprising or unexpected changes.

2. Perceivability

Perceivability invites interaction. Hidden interactions decrease usability and efficiency. People should not need to search for opportunities to interact. They should not guess when interacting, due to confusion or desperation. We should be able to review an interface, and identify where we can interact. Interaction should not depend on luck or random discovery.

3. Learnability

Interactions should be easy to learn, and easy to remember. Ideally, people should be able use an interface once, learn it, and remember it forever. Practically, people often need to use an interface at least a few times before they learn it, and then we hope that they will remember what they have learned.

4. Predictability

Good interaction design should set accurate expectations about what will happen before the interaction has occurred. We should be able to show people an interface and ask, before they interact, what can you do here? Where can you interact with this? What will happen if you do that? What will be the result, or outcome?

We can set context and expectations by either demonstrating what can be done, such as animations, video, or overlays, or by describing what can be done, such as providing examples or instructions.

5. Feedback

Feedback provides acknowledgment of our interactions and information about their outcomes. We use feedback to understand where we are, our current condition or status, what we can do next, and even to know when we are finished.

Feedback should complement the experience, not complicate it. Provide feedback when people need it. It should be noticeable and meaningful. Failure to acknowledge an interaction, or provide feedback that is not noticed, can lead to unnecessary repetition of actions, mistakes, and errors.

Forming a System

The five principles all work together in a system. When interactions are perceivable and noticeable, and their outcomes can be accurately predicted, people will interact with the interface. When meaningful feedback is provided after an interaction, people will understand how their actions led to the outcomes. When people understand the feedback from their interactions, and they learn how the interface works, with continued practice and observation of the interface, their learning becomes stronger.

# data[].attributes.attachment_link.title
The Five Principles of Interaction Design

# data[].attributes.attachment_link.description
Interaction Design is one of the many facets of User Experience Design. The Encyclopedia of Interaction Design defines it as "shaping digital things for people's use." It's a complex and wide ranging field that covers nearly all aspects of cognition, emotion, and behavior.

# data[].attributes.body
wisselwerking ontwerp

# data[].attributes.body
User Centered Design (UCD): de ontwerper inventariseert de behoeften van de gebruiker en zoekt daarvoor een oplossing.
Task Centered Design: de ontwerper ontwikkelt hulpmiddelen voor het uitvoeren van taken.
Systeemontwerp: de ontwerper bekijkt het grote geheel en probeert de onderdelen van het systeem op elkaar te laten aansluiten.
Genieontwerp: de ontwerper gaat uit van zijn eigen ervaring, vaardigheid en kennis om een product te ontwerpen.

# data[].attributes.attachment_link.description
ArtCenter Interaction Designers are highly sought-after by top employers around the globe for jobs in UX design, mobile design, web design and game design.

# data[].attributes.headline
- Ze maakt een installatie die de bewegingen van festivalgangers omzet in muziek. Iedereen krijgt zijn eigen soundtrack, die leuker wordt naarmate zij of hij meer danst.                 Hij werkt voor een grote non-profitorganisatie en denkt mee over een supermarktapp die ervoor zorgt dat studenten elke dag gezond eten. Hoe gezonder ze eten, hoe goedkoper bepaalde boodschappen.            Ze ontwerpt voor Adobe programma's die perfect inspelen op wat de gebruiker ervan wil.

# data[].attributes.subject
- Ze maakt een installatie die de bewegingen van festivalgangers omzet in muziek. Iedereen krijgt zijn eigen soundtrack, die leuker wordt naarmate zij of hij meer danst.                 Hij werkt voor een grote non-profitorganisatie en denkt mee over een supermarktapp die ervoor zorgt dat studenten elke dag gezond eten. Hoe gezonder ze eten, hoe goedkoper bepaalde boodschappen.            Ze ontwerpt voor Adobe programma's die perfect inspelen op wat de gebruiker ervan wil.

# data[].attributes.attachment_link.readable_text
Take your UX to the next level with a little interaction. Here's our roundup of the top 17 interactive sites - number 3 is our favorite!

As a UI/UX designer, it's your job to create delightful experiences for users. But despite the regular reminders of the importance of readability and accessibility, usability simply isn't enough to create a memorable experience. So what's a designer to do?

It's time to design an interactive website. Sites that response to a user's interaction or complement the user journey with functional and captivating interaction don't just make users smile. They actually contribute to keeping users engaged and coming back for more.

Here are 17 awesome examples of interactive sites that go above and beyond for their users. We've also included some expert tips on how to get started with their interactive features in your design process, using Justinmind. So if you're ready to start designing interactive sites without sacrificing usability, let's get begin!

#1 Interactive site: Handsome

Handsome is a holistic experience design agency that specializes in creating deeply connected brands, services and products.

Handsome's website has a black and white, retro-vintage theme which is accompanied by a selection of charming micro-interactions that delight visitors as they explore. Each project is displayed within the horizontal scrolling menu, a 'must-see' feature of this site.

How to design it with Justinmind: Create a web prototype by choosing the web device template when you open Justinmind. Drag and drop widgets to the canvas and customize your UI elements. Try using contrasting hues to replicate Handsome's minimal color scheme. Then, create your horizontal scrolling bars by following the steps in this tutorial.

#2 Interactive site: Daesk

Daesk is a website project designed by Web Design studio, 17Grad.

Daesk features a parallax scrolling site with vibrant acid colors and gorgeous blended background vectors. We love the Call to Action button that reacts to your mouse, and the floating reviews that will draw your attention as you scroll.

How to design it with Justinmind: You can easily create a parallax scrolling effect in your prototypes with Justinmind using our pin feature. Learn more here.
Download free
#3 Interactive site: Tillamook Sauce Starters

Tillamook Sauce Starters is a website made by Hello Design. The website features a scroll-to-make experience, which takes visitors on an interactive journey through cooking pasta with Tillamook. Mix, melt, enjoy.

We love how clean the visuals are and how the fluid each scroll movement is. Cheese sauce has never looked so good!

How to design it with Justinmind: you'll need to create a parallax scrolling website. Pin UI elements to the canvas and have their position adapt to the screen's resolution or container's size.

#4 Interactive site: Ono

Ono is a zero waste, wholesome and highly personalized meal delivery service that uses DNA, gut biome and lifestyle data to personalize your order.

Ono's site uses a split-screen layout and contrasting earthy tones to separate the stunning visuals and text. Its use of large fonts keep links accessible. Ono uses big data in its onboarding process, guiding users through a personal health assessment to be able to suggest the best possible food recommendations.

How to design it with Justinmind: Use dynamic panels to create a split-screen layout in Justinmind. Dynamic panels are container widgets that allow you to display different content elements within the same region of the screen.

#5 Interactive site: Nike Reactor

The Nike Reactor allows you to build personalized Nike React footwear and try it on for size via the interactive site.

When you land on the Nike React Homepage, you're greeted with an animated figure running across the screen, sporting Nike React sneakers, shape-shifting between a body made of feathers and bubbles. From there, you can create your own Nike React experience, choosing your pillow shape (as light as flamingos or soap bubbles, or as responsive as basket balls or space hoppers), running style (Sunday special, Serotonin seeker, Zen master etc.), and sneaker color (pink matcha, red lava, fusion black). Click to see the animated figure sporting your personalized Nike React experience on-screen.

How to design it with Justinmind: Check out our Events system to design rich web interactions to animate your prototypes.

#6 Interactive site: Tim Roussilhe Portfolio

Creative developer Tim Roussilhe's personal website is full of amusing micro-interactions. Scroll down to view his project, each with their own interactive elements!

#7 Interactive site: An Interesting Day

' An Interesting Day ' is a one page website announcing digital studio Bakken & Bæck's 2018 'An Interesting Day' conference.

The one pager features a fun interactive color scheme slider with links to the host's website, previous conferences, and contact information. You can reach all of the site's information without needing to scroll at all.

How to design it with Justinmind: you can create a one page web prototype in Justinmind. If you want your site to scroll, start by creating a parallax layout and page markers. If you want a one pager without scroll, simply place all of your content on Justinmind's canvas so that it is viewable during simulation.

#8 Interactive site: François Risoud Portfolio

This is freelance full-stack developer François Risoud's portfolio website. His site features a quantum physics background, a theme that continues throughout. Click the blob to learn more about François, his skills and past projects. A very original resume!

#9 Interactive site: Papalosophy

Papalosophy combines food, art, technology and nature to organize gourmet food, content and events.

The Homepage features an interactive splash screen with a slideshow that automatically (as well as manually) toggles Chef Joel Serra's cookbook and the introduction to the rest of the site. As the mouse is dragged across the screen, it's followed by abstract connector nodes that give the site a great responsive feel. Also, check out the awesome Cookbook snaps!

#10 Interactive site: Ethics for design

Ethics for Design hosts an interactive on-site documentary that discusses the impact design has on society. The site uses a 100% browser width layout, which brings the documentary to life.

How to design it with Justinmind: with Justinmind's latest release, you can change the screen properties to "Full browser width" so that upon enlarging or shrinking the page, your header will content will adapt to fill the page.

#11 Interactive site: Uber sign language

This Uber sign language site teaches users how to sign to be able to communicate with American hearing-impaired drivers.

This is a great example of accessibility in web design, plus the interactive qualities of the website make the learning experience even more interesting. The use of cool gradients gives the site character without taking away from the most important content.

#12 Interactive site: mediaBOOM

Digital Marketing and Advertising agency mediaBOOM has taken a unique approach to creating its branding.

Its interactive website features a background video that gives visitors an insight into the agency's culture and day to day.

How to design it with Justinmind: if you want to include video in your prototype, simply use the HTML embed feature. You can embed any URL you like.

#13 Interactive site: Zwift

Zwift is a training app for cyclists. It features an at home training game that connects cyclists around the world.

The website where users can download the apps includes interactive previews of the app simulation, to give users a taste of the types of workouts they can hope to achieve with Zwift.

#14 Interactive site: Draggable by Shopify

Draggable by Shopify is a microsite hosted by GitHub, featuring a lightweight, responsive drag and drop widget library.

The site introduces drag and drop functionality for creating website UI elements. Visitors are encouraged to get involved and play around with the on-screen items.

How to design it with Justinmind: create a responsive web prototype using Justinmind's scalable and pinnable UI elements. Alternatively, kick start your responsive web design with our responsive web design template, complete with scalable images, prioritized content blocks and fixed-position UI elements.

#15 Interactive site: Toggl

Toggl is a time tracking app that offers online time tracking and reporting services from the web browser, as well as mobile app.

Why should time tracking have to be a drag? Toggle's Homepage features whimsical interactions and visuals, which can also be found in other parts of the site, such as the features, training, pricing and sign up pages.

How to design it with Justinmind: create fun visuals and animations in your prototypes with the help of customizable SVG vectors. Change their color and scale them to the size you need.

#16 Interactive site: Salt & Pepper

Salt & Pepper offers consulting, development and technical support for Ruby on Rails web programming.

The site's Home features a responsive display. The black and white color scheme is a theme throughout the site. This along with the large, block fonts help visitors read through the features and get the support they need as efficiently as possible.

How to design it with Justinmind: did you know you that you can use all your favorite Google Fonts in Justinmind?

#17 Interactive site: Hungry Book

Hungry Book is an art project inspired by minimalism in food. The manifesto uses Occam's Razor to create a basic kitchen set and identify key ingredients for rational consumption.

Scroll through the site to learn more. You'll be met with content from all angles, making this site a real adventure!

# data[].attributes.attachment_link.title
17 interactive site designs you'll want to steal

# data[].attributes.attachment_link.description
As a UI/UX designer, it's your job to create delightful experiences for users. But despite the regular reminders of the importance of readability and accessibility, usability simply isn't enough to create a memorable experience. So what's a designer to do? It's time to design an interactive website.

# data[].attributes.attachment_link.readable_text
Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: "Good design, when it's done well, becomes invisible. It's only when it's done poorly that we notice it." So, let's look at five examples of obviously bad designs, shine the light on how good design makes it work, and distil some lessons so we can all create great and invisible experiences for our users.

1. Information overload

The Bad: Parking Signs in Los Angeles

Parking signs in Los Angeles (LA) have been the epitome of information overload for decades. They've always been notoriously hard to understand, because the traffic rules are complex, resulting in the need to convey a lot of information in a small area.

How confusing are these signs? Traditionally, very -look at this example from the 2010s:

As LA parking signs go, this example is already a pretty simple one.

Imagine you are a driver along this road on a Tuesday morning at 9 a.m. Can you park at this spot? What sounds like a simple question takes a lot of mental processing to answer.

As designers, we're often faced with situations where we have to design for a lot of information to be displayed in a small space. The parking signs in LA might be an extreme case, but many times designing for mobile apps means facing the same problems. Is there a way out-for both the parking signs and designers in general?

The Good: Nikki Sylianteng's Parking Sign

Designing a sign to display all the information, while being easy to understand, sounds like an impossible task. But that's exactly what Brooklyn designer Nikki Sylianteng did.

Nikki's proposed parking sign was eventually used in LA as part of a trial run.

Part of why Nikki's design ¹ works well is that it is user-centred: Nikki realised drivers simply want to know whether they can park at a spot. Yes or no-that's all drivers needed, and that's all the parking sign shows.

Her design also made use of visuals, rather than text, to convey information. The result is incredibly intuitive: green for OK, red for No Parking. It's even designed for the colour blind, with stripes for No Parking.

Now when you look at the sign, you'll know that on Tuesday at 9 a.m., parking is not allowed. The bars show what's what at a glance-simple.

Lessons Learnt: Best Practice

Understand what your users need, then design based on that. This helps reduce information overload.

Have lots of information to convey to your users? Try using visuals instead of text. Learn more about data visualisation here.

2. Mystery Meat Navigation

The Bad: LazorOffice.com

Coined in 1998 by Vincent Flanders of Web Pages That Suck ², the Mystery Meat Navigation (MMN) refers to cases where the destination of a link is not visible until the user clicks on it or points the cursor at it. The term "mystery meat" was a reference to meat served in American public school cafeterias that are so processed that their exact type is no longer discernible.

MMN is bad because it reduces the discoverability of navigation elements. This adds cognitive load to users, because they now have to guess how to navigate or what clicking something does.

While most MMN are found in older websites, they're surprisingly prevalent in modern websites. Take Lazor Office, a design firm that creates pre-fabricated homes, for example.

LazorOffice.com has a grid of MMN images on its home page. As you can see, this tableau gives precious little indication as to where to go. Instead, nine images just sit, leaving some of us pondering an enigma rather than interacting with a page.

Below the fold of their home page, a grid of image thumbnails lie waiting. Are they clickable? Well, yes-if you move your mouse cursor over an image, it changes to a pointer. But what happens when you click on an image?

"Click to find out!" is never a good User Experience (UX) solution. Chances are, your users are going to abandon their navigation and find an alternative solution in a competitor's site.

The Good: Course Cards on Interaction Design Foundation's website

Thankfully, MMN problems are easy to solve. The key is to be aware that you must clearly label links. Simply adding "View project" that appears on mouse hover will improve the usability of Lazor Office's page above.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

Our course cards are as un-mysterious as links go.

For the Interaction Design Foundation 's course cards, we not only have "View Course" at the bottom of each card to indicate the action that will happen, but we also have a hover state with the text "Go to course". Many websites follow a similar convention, and you should too, to maximise the usability of your website.

Lesson Learnt: Best Practice

Always label your links! You wouldn't like to eat mystery meat-and similarly, your users wouldn't like to click on mystery links.

3. Adding Friction to User Actions

The Bad: iFly50.com

As designers, we should add friction to user actions with extreme caution, unless the point is to dissuade users from performing that action. Sometimes, however, we might even unintentionally add friction to user actions (mostly due to aesthetic or novelty reasons) that result in detrimental UX.

One example is iFly50.com, created for the anniversary of the iFly magazine by KLM. iFly 50 is a vertical scrolling website showcasing 50 travel destinations, and in some destinations (such as the one below), a button near the bottom asks users to click and hold for a few seconds to view more photos.

iFly 50 expects its users to click and hold for a few seconds every time they want to see more photos.

The act of adding a few seconds of friction to each action can result in tremendously poorer UX. Imagine if, instead of clicking to load a page instantly, you've now got to click and hold for two seconds for every link you clicked in your browser. You'll quit exploring the internet altogether after a few click-and-holds.

Many times, we designers tend to get carried away with the newest interaction styles or actions, but it is critical that you always exercise caution when your design could add friction to user actions. Most of the time, tried and tested conventions (for example, simple clicks or swipes) work perfectly.

The Good: Elastic Scrolling on iOS

Interestingly, mindfully adding friction to user actions can result in great design. One of Apple's most popular inventions in their mobile operating system, iOS, is the creation of elastic scrolling, where in certain situations (such as at the end of a webpage) scrolling becomes increasingly difficult.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

In iOS's elastic scrolling, friction is deliberately added in some situations.

You can see this in action above, where increased friction occurs when the user scrolls to the end of the webpage. Friction was added to indicate situations where scrolling is no longer allowed: and the effect is an intuitive experience.

Lesson learnt: Best Practice

Avoid adding any kind of friction to user actions as far as you can-and carefully implement it when you have no alternative.

4. "Clever" Design that Ignores Usability

The Bad: Bolden.nl

Sometimes, clever designs can be detrimental to UX. What makes this mistake more dangerous is that we designers love clever designs. They're tiny graphical wonders that bring a smile to our faces. Sadly, the majority of humans are not designers. Even sadder, not all clever designs are good designs, especially when they create accessibility, discoverability or usability problems.

Take Dutch strategic design and development studio Bolden's website, for example:

Can you tell what their home page is trying to say? No? Well, that's because you'll have to move your mouse to the corner of the page so as to see the messages properly.

Is this a clever design? Yes, definitely. But is this bad design? Absolutely!

This is a great example of designing for the designer, rather than the user: the website seriously reduced the legibility of its headlines in its creators' determination to deliver a novel design. Whoever designed this also left out text to tell users that they're supposed to move their mouse to the corners, which means the discovery of the headlines relies on happenstance. Furthermore, even when the headline is revealed, the contrast between the text and the background is poor due to the point that you can still see overlapping text. This all adds up to create a user- un friendly website.

The Good: CultivatedWit.com

Cultivated Wit's website is a great counter-example of how clever design need not put a strain on usability.

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Cultivated Wit's homepage displays an illustrated owl.

In Cultivated Wit's homepage, the illustration of the owl winks when your mouse moves over it:

Surprise! The owl winks at you when you point the cursor at it. Note the wise allocation of whitespace, too.

The key difference here is that this does not form an essential part of the website, so it does not diminish the usability even if the user does not discover this clever design element.

Furthermore, they have a clear downward-pointing arrow to suggest something lies below the fold. And when you scroll down, you'll see this:

And websites can be clever without sacrificing UX.

The copy (which is legible and has good contrast) creates a sense of wit-not unlike what Bolden was trying to achieve-without diminishing the UX of the website. The only small problem is the text "Join our email club" should be more visible, but taken as a whole, Cultivated Wit's website is a great example of delivering a clever design without creating poor UX.

Lesson Learnt: Best Practice

Clever designs should always be made as foolproof as possible, and/or tested on actual users. Sometimes, clever designs can backfire and hurt usability.

5. Superfluous animations

The Bad: PayPal Receipt Concept on Dribbble

Animations are a crucial element of interaction design, but they should always serve a purpose. They should never be done for animation's sake. Unfortunately, designers tend to have a love affair with animations, partly because animations are so fun to create that we might not know when to stop.

Vladyslav Tyzun's animation concept for a PayPal email receipt, posted on Dribbble, is an example of animation done wrongly:

Author/Copyright holder: Vladyslav Tyzun. Copyright terms and licence: Fair Use.

The animation is pretty, but superfluous. In total, it takes a whopping 3.5 seconds to see the transaction details. A simple fade-in of the receipt would be more elegant, and because it takes up less time, better for the user as well.

This problem becomes dangerous when designers seemingly cannot get enough of animations. As of 2016, Vladyslav's animation would receive more than 500 likes and 8,000 views. This shows a misguided appreciation that designers have towards animation for animation's sake. Having insight into the designer's tendency to prefer swooping epics over more direct representations and catching yourself before you give in to animations will save you a lot of time and prevent many headaches. Remember, users come to sites for a purpose-we want to show them what they are after in a short space and time, not detain them in a grand tour of the gallery.

The Good: Stripe Checkout's Animation

When we do animation purposefully, however, the results can be great. Look at Stripe Checkout's animation when the user receives a verification code:

Author/Copyright holder: Stripe, Inc. Copyright terms and licence: Fair Use.

Stripe uses animations to make things seem faster than they are: it provides users with updates (like "Sent") even though they might not have received the SMS yet. This prevents users from feeling frustrated at having to wait, and provides assurance that an SMS is on its way right now.

Rachel Nabors, an invited web animations expert at the W3C, suggests five principles to keep in mind when designing animations ³:

1. Animate deliberately: think through each animation before you create it.

2. It takes more than 12 principles: Disney's 12 principles of animation work for films, but not necessarily for websites and apps.

3. Useful and necessary, then beautiful: aesthetics should take the back seat to UX.

4. Go four times faster: good animations are unobtrusive, which means they run fast.

5. Install a kill switch: for large animations such as parallex effects, create an opt-out button.

Lesson Learnt: Best Practice

Always make your animation purposeful: too much can kill the UX of a product. Beauty has to pull its weight and be functional.

The Take Away

Isn't it fun looking at examples of bad design? Thankfully, it's educational as well. Here are the key lessons and best practices from the five examples of good and bad designs:

1. Understand what your users need, then deliver that information.

2. If you've got lots of information to convey, try using visuals instead of text.

3. Always label your links! Users don't like mystery links.

4. Avoid adding any kind of friction to user actions, unless they're meant to dissuade the action.

5. Test your clever designs and include them cautiously.

6. Animation is like cursing. If you overuse it, it loses all its impact.⁴

The next time you frown at an instance of bad design, stop to think: understand why the design failed, find examples of designs that did things right, and make a mental note of the lesson you've learnt. And then share the love: share your lesson with other designers in our discussions forum!

# data[].attributes.attachment_link.title
Bad Design vs. Good Design: 5 Examples We can Learn From

# data[].attributes.attachment_link.description
Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world.