June 19, 2021 9 minutes read
In this article you will find some key tips that helped me create better user experiences. Hope you will find them useful. Let’s dive into it.
Either is a client or an entire team that you’re meeting with, when working on a new project, you have to have a pen and paper to take notes. You cannot begin without understanding the people you are designing for. Ask questions, find out what their needs, motivations and fears are. Long story short:
This is the process every ux designer should follow. I strongly recommend taking a course or reading articles from these guys.
Ui Designers fixate too much on the artistic side of an interface and sometimes they hide features or push them below just for the sake of receiving validation and appreciation from a beautiful result.
On the other hand ux designers don’t care at all about aesthetics, but rather on functionality. Anyways, I don’t know what’s the big deal with these two terms, so many people use them in the wrong context. Let me put it simple:
UI is part of the UX.
You cannot afford to say that I am more into the esthetic part of a product, neither that it doesn’t matter how it looks like as long as it works. Find the middle ground, but put functionality prioritar.
You have to come through every stage of the process and each one of it is equal important no matter what the order is. You will finally gain insights, learn about your users and offer them a solution to their problem.
This one I’ve learned it the hard way. Late nights spending and failing in creating something beautiful and functional at the same time. Whenever I have this problem, I’ve got to take a step back and reflect on the idea, talk with my wife or a friend to liberate myself, or you can do any other activity that you love.
Projects come and go, you will fail some and win many others. Knowing how to balance and understand yourself in the creating process is key, and over stressing with the thought of failing will not be productive or healthy on the long term.
Whenever you feel overwhelmed with a complex task that you don’t know how to solve it yet, just do this:
Even if you end up with complicate design that has multiple features on it, you still can make it look simple, yes you can. This situation is called featuritis. First of all, who says design it’s easy? No one in the right mind, I hope.
If you’re working on a large enterprise, a product becomes complex with every release and what seemed a clean and easy to use interface in the early days, is no longer available now. Only a tiny minority of expert users can fully understand its capabilities. We don’t wanna’ do that.
Let’s look at gmail for example. What do we see here?
A lot of nav links, some buttons, but somehow the information is well structured, the layout is still balanced, your eyes feel comfortable and you get the message right away. Here’s a method they have used.
Displaying options depending on interaction, nowadays called progressive disclosure.
If we want to delete an item you can check the checkbox near to it and some action buttons will appear above.
Also make sure your app have red routes.
I know that you might be thinking why I decided to start with them? We all know that the first elements that draw our attention right away are the images ui designers pick to create great impact.
Believe it or not, they will do anything to match a high quality photo with the chosen colors, that together depict a spectacular output among their work.
It doesn’t mimic the real world apps that we use in order to satisfy our needs, but, when you make a presentation on Dribbble or Behance, it certainly does the trick. If you don’t know yet what I am referring to, let’s take a look at this example:
This is a mobile coffee concept that I am working on lately. I don’t try to promote my shot, just that I don’t want to critique someone else’s work.
The accent color here is a combination of orange and brown, or something in between. Its official name is Di Serria. Now, this color will go well with a light cream, white, and dark brown, basically coffee colors. The images that I’ve used, have these colors in their composition, as you can see. Overall, it looks pretty clean, modern and pleasant to the eye (can I praise my work, more?).
Let’s add an ordinary product image as we see in a live mobile app, where coffee shop owners don’t spend a lifetime picking the right photo, and put them together.
I think we all agree that the image on the right matches better in this particular case than the one on the left. The photos in both are great, but for my case I will stick to the one on the right.
You don’t need to spend too much time finding the perfect image, as long as you prioritize usability over aesthetics you’re still on the right path. But why not usable and beautiful at the same time?
The details are not details. They make the design. Charles Eames
I want you to keep focusing on details. What else do you see when you look at a great design? First of all, how do you recognize it? Is it crowded? Of course not. Can you see long paragraphs crossing side to side, many font styles, with low visibility? I think not.
At first glance a clean interface is well balanced with hierarchized and visible typography pleasant to the eye, that communicate well the purpose and the intent of the product/service.
A correctly built typography offers the base for creating a harmonious user interface. If possible stick with one or two typefaces in order to give your text unmatched legibility, clarity, and consistency through all of the pages.
We have a great article on how to make typography the right way.
I’ve played a bit on a mockup to showcase the difference between bad and good typography.
In the above photo we barely read the paragraph due to a poor contrast. Maybe a white bg underneath the entire content will increase readability. Let’s see:
This is better in my opinion. As you can see, a small change can provoke a big difference.
I can go further and present some other tips for designers when dealing with typo, but this is a complex subject, so I strongly recommend this article.
Designers often do anything to stay up to date with latest design trends by adding that ‘spark of magic’ to their layout. I think this is ok as long as usability is not sacrificed for esthetics.
There is a thin line we don’t want to cross when using these graphic elements that serve no purpose but making a pleasant layout. We should delight our users with them, that’s why we should keep them ‘quite’.
Before you add that these details to an interface just make sure:
Another key aspect that contribute to a successful design is the white space or negative space. We all know how stakeholders and clients want to add complex features to their product in order to accommodate users needs. We still have to maintain that clean aspect.
According to Mark Boulton, the white space represents the empty space between the elements of your designed website.
Take advantage of your space by offering it real use and don’t try to squeeze or disperse your content. Find the middle ground; white spaces give an elegant and peaceful note which relax the eyes while emphasizing the main message.
So many designers waste their time on creating the same components over and over again on every new project. Consider using ui kits to reinforce your creative process, or create your own set of elements that create consistency throughout the pages and depict a better overall look.
You can reuse them on future projects by applying different styles. This is how you build a toolkit.
By using common elements and patterns that leave no skeptical feelings, users will feel comfortable and happy to user your product and will encourage their friends to utilize it. What this has to do with anything?
I see some designers trying to alter basic elements like buttons for instance. A button is still a button, with straight or rounded corners, covered by a simple color or a gradient. Don’t try to be too creative, you don’t want your users stuck, wondering what element is that.
Although I am not a big fan of illustrations, they are quite fancy & fashionable at the time. I can’t deny it.
Designers love to create all kinds of illustrations, especially 3D ones, with bright and vivid or warm colors, that convey a strong feeling of originality that make your clients differentiate from competitors.
You can read articles, tutorials, even books, but if you don’t practice a lot, all the information will be forgotten. You must strive for progress, not for perfection.
Don’t try to be a perfectionist, just try to be better than yesterday.
If you take a look at any designer’s work, start from bottom to top. You will see a history of progress, hard work and dedication. There are no shortcuts.
In essence, creating a good design is something you can’t achieve in a month. Working on several companies, I have noticed designers at work, and saw how they managed some of the challenging projects and guess what, it always comes out to a human centered approach. Behind every app there are people, not users.
Continuous learning and practicing needs to be a constant in a ux designer’s career. Doing ‘good work’ is not enough. You need to be curious and challenge yourself, step out of your comfort zone to become the best designer you could be.
If you enjoyed this article press the 👋 so more people can enjoy it.
By Lucian Dinu
You don’t need to have any previous experience with Axure to follow along with this article, but if you do have, maybe this article can help you to shed some light on some core concepts related to interactions and prototyping in general, that are usually misunderstood or not so obvious for designers.
Designers coming from other screen design tools like Sketch, Figma, Adobe XD can find it difficult to understand how Axure is actually working, the terminology, tools and how to build an interactive prototype.
Prototyping is an important step in UX methodology and can play a big role in improving the user experience. A prototype is a simulation, usually used to help understand and test how an application (or feature) works, what it does and how to interact with it.
In order to create any kind of prototype you will need to add interactions to some of your design elements.
Axure is regarded as a software with a steep learning curve, and the reason is clear: it has a lot to offer, there are a lot of features packed and this is not so obvious at the first glance.
In general, you can do a lot in Axure. You can do wireframes, diagrams or high-fidelity UIs (like you usually do in Sketch, Figma, Adobe XD) but in this article we will focus on the prototyping interactions part. So, I’m not gonna do a deep dive of Axure interface and features simply because it is not the scope of this article and I would probably need to write an entire chapter of a book.
If you have used screen design tools like Sketch, Figma, Adobe XD or any other general design tool like Photoshop, Affinity then you are pretty much used with the tool metaphor. Tool metaphor? Let me explain.
The way these apps model the interaction is by using existing mental models that people have with tools in real life.
In real life when you want to build something, you are using different tools to achieve this. So, for instance, if you want to do a watercolor painting you are going to use a glass of water and brushes. Both, the brushes and the glass of water, are tools to help you place the colors on the canvas to accomplish your watercolor masterpiece.
In software applications you can use these existing mental models and add on top of them conceptual models.
Next, I’m gonna try to explain the conceptual models used in these kinds of applications by breaking them into levels. Each new level adds more abstraction and knowledge on top of the previous one.
So let’s take for instance Affinity Photo (which is very similar to Photoshop) and see how this conceptual model that I’ve described earlier it’s used. All the available tools are represented by an icon in the tools toolbar. You interact with the tools in the same way you interact in real life, you pick the tool and use it to draw something (of course we need to make sure we’ve set the right colors) on the artboard (just a note here, I’ve simplified this example a lot, but you get the idea).
We, as designers, interact with the same concepts and, in most cases, the same terminology from the real life like:
As you can see these tools help us to place the colors on the artboard. The way the colors are applied is in our direct control through the tool.
So the conceptual flow for the first level has these steps:
Let’s now go a little bit further and continue with our example of using Affinity Photo and try to use the rectangle tool which adds a vector (object) rectangle on the artboard. If you are familiar with vector drawing apps then there is nothing new up to this point everything should be familiar.
But there is something different here, we’ve used a special tool, the rectangle tool in our case, to place a rectangle object on the artboard; basically we no longer place colors directly, but the object renders its geometry using some attributes that we can change.
This is actually a big change because behind the scene the software is doing the heavy lifting like drawing the geometry using sophisticated mathematical functions. All we do is to change some of the properties that impact the behavior of these mathematical functions.
It’s interesting to note that, on this level, the tool and the conceptual model are already more abstract than on the first level, but for now we don’t have problems adapting because we used this model in other similar apps.
Let’s recap, we can use special tools (e.g rectangle tool, pen tool, ellipse tool and so on) to create objects and then manipulate their properties to fit our needs.
So the conceptual flow for the second level looks like this:
Now it’s time to leave the familiar world of Affinity Photo and move to Axure where we have similar objects like the ones that I’ve previously described but there are some key differences.
One key difference is related to the terminology.
Another key difference is in the way we create these objects and place them on the page. In Axure, in general, we create new objects by dragging them from the Library pane into the page. This is a little different conceptual model than the one we’ve used before. The Library pane holds some ‘templates’ (sometimes referred to as blueprints) that we can use to create new objects.
However, as a quick note, Axure allows us to use the tools conceptual model as well but the type of objects that we can create is more limited.
So, why is Axure calling these objects widgets? Simply put, they are a little more advanced. As in the second level example, they have properties that can be adjusted but they can also respond to events.
This possibility to respond to events is the key ingredient in creating any kind of interactions (interactivity)in Axure and in many other similar tools which are heavily influenced by Axure.
To sum up, the conceptual flow looks like this:
Now that you have been introduced to Axure widgets let’s explore them in more depth.
Within the app, Axure groups these widgets in categories which are inside libraries and they are available within the app in the Library pane. These widgets sometimes are listed multiple times under a slightly different name but with different default settings, for instance the rectangle widget is available as Box 1, Box 2, Box 3, Primary Button with some different initial properties like: fill color, border, corners and so on. In essence they are the same widget but with a setup for a predefined purpose (again, like a template).
On Axure documentation these widgets are grouped based on their packed functionality in 2 categories like basic and advanced but, I would group them in 3 categories:
Basic (in this category are shape widgets that are familiar in general with any UI/UX designer and some specific ones used only in some cases)
In this category we have the following widgets:
Semi-advanced (these offer additional user input in general or are part of the common UI patterns)
Advanced (these have some advanced functionalities that I’ll touch on a future article)
Each of these widgets have a set of common properties and events and specific ones.
The interaction model is inspired from RAD (Rapid Application Development) tools in general, and one difference is that we don’t write any code.
In order to make it easier to follow, let me introduce you to some of the terminology:
If you don’t fully understand what they are, don’t worry I’ll explain them and their relation down below.
In order to build (design) our prototype we place inside a page multiple widgets and adjust their properties and/or respond to different events (like the Click or Tap event) using actions. Also a prototype can have one or more pages depending on the needs.
Let’s see how this model works in Axure (see the image below).
So, each widget can listen to events, the events are triggered by an interaction and the response to an event can be an action or a list of actions.
Now that you’ve seen the relation between these concepts you should have enough understanding about the underlying interaction model.
This is it for now, in future articles we will learn more about these interactions, how to use them and also we will learn about other concepts like states, conditions and expressions.
I’m a self-taught designer and occasional developer. blog.luciandinu.com
Hi guys, today is about flowcharts and how can they make your life easier. Flowcharts help you communicate & present your design stories in front of your team or audience. Start presenting ux processes like a pro. Enjoy!