What Makes Nostromo the Best User Experience in Central Europe?

And how you can learn very useful UX basics from it

Nostromo is a project management tool specifically designed for digital product development. It’s an all-in-one tool for teams working on digital projects, what helps them to focus on their workflow, organizing their tasks and tracking projects’ datas in one place.

And Nostromo does this by a proven outstanding User Experience. After guys at Nostromo won the national final in Hungary, they’ve also beaten everybody else in the region, and have become the regional Winner at Central European Startup Awards 2016 (CESA) in ‘Best User Experience’ category last week! (Congratulations, we’re very proud of them!)

Nostromo is the regional Winner at CESA 2016 in ‘Best UX’ category

As a Digital Project Manager, I love to use highly effective and useful tools like Nostromo, because they make my work and life so much easier.

Now it’s a honor for me to use an award winner tool, so I thought it’s worth to dig deeper into how Nostromo masters User Experience, because we can definitely learn a lot from it!

For this, I’ve picked up Joe Natoli’s course about “User Experience Design Fundamentals”.(Joe Natoli is an industrial veteran in UX, with 22 years of experience)

With this, we can take a look at the basic steps of making good User Experience Design. I can also show you great examples for them from Nostromo. Using these fundamentals, we can build (not certainly an award winning), but so much better UX next time! ;)

Let’s get into it!

First, we must clarify, what User Experience design is….

…..no, it will not be good. Let’s have a look at what User Experience design is NOT instead.

What is NOT UX?

UX is not UI

Main misunderstanding around User Experience design (UX or UXD) is: it’s the same as User Interface Design (UI or UID). UI design is an important part of UX, but they are not the same. (In a small nutshell:) UI is what users see on the screen. UI is only a part of UX.

UX is not a step in the process

UX is not about assigning a task to a designer at a phase of a project. It’s not about doing something, and then move on. It’s need to be integrated into every phase of a project. It’s not a step in the process. It is the process.

UX is not about technology

As Bill DeRouchey [link] says: “User experience design is not limited to the confines of the computer. It doesn’t even need a screen. User experience is any interaction with any product, any artifact, any system.”.

So, UX is more than technology. It’s about improving a persons experience with a whole product, a system.

UX is not just about usability

Usability is important, because it makes a product effective and easy to use. But UX is not just about that. A product is more than something what is dead simple to use.

UX is not just about the users

It might be surprising to read, but it’s the truth. UX is about an overall experience, what meet as many goals and needs as possible for the users AND also for the business.

What is UX then?

So UX is not just a part of designing a product. It’s about all the processes what need to be done. Every stakeholders should care about that — from project managers through developers, not just designers. There are a lot of questions need to be considered throughout the UX designing process: who’ll use our product? What is it good for? What are the core needs of a user? What needs to be solved? How the user will interact with the product? And how the user feel using that? (And so on…)

The point is: we must constantly thinking about how to give real value to our users. Because the only way to get back value for the business is giving value to the users first.

How to build good UX?

Referring to Joe Natoli’s curricula, we need to walk through 5 key elements for building good UX:

1. Strategy

2. Scope

3. Structure

4. Skeleton

5. Surface

Let’s take a look at them in details figuring out how to design User Experience in our next product, and find out how Nostromo mastered these steps.

1. STRATEGY

Strategy can be explained the simplest way like this: it’s the reason for the existing of a product. Both from users side and creator (business) side. The most relevant question here is this: why is it necessary to make that product?

Because of this, defining strict strategy for every product/project is crucial. Every stakeholder must have a clear AND THE SAME idea about what the goals are. Else we invite a disaster, and from a ‘white cube’ in the beginning, we’ll get to a ‘red sphere’ at the end… And nobody will like it.

Here is a picture from Joe Natoli, what shows us perfectly what happens if the strategy is not clear for a team. (I think, most of you were in a situation like this at least once in your lifetime.. ;) )

Consequences of lack of clear strategy

Avoiding disasters like this, we should consider some questions seriously.

Questions to consider

  • Who’ll use it? What do they want?
  • Who the users really are? Where do they live? What do they like? What do they hate?
  • What are our users’ cultural and social references?
  • What users want from us? What are their core need?
  • What are their jobs? What’s their work environment like?
  • How does our offer fit to their tasks? How does it fit to the other products they use?

Strategy of Nostromo

As now it’s clear: Nostromo has been made for managing the whole development of digital solutions. These can be projects of developing existing systems, and also independent new products what are needed to build from 0, with end-to-end solutions.

Who use Nostromo?

Users of Nostromo are teams who build digital solutions described above. They can be everyone, who participates in making a project or product: project/product managers, software engineers, UX/UI designers, consultants, QAs, marketers, and also customers. We don’t need to think necessarily big teams. They can also be a few designers working together for instance.

What do users want?

What is essential for them: to do their job in a digital environment what is as simple, effective and as easy to use as possible. Why? Because they’re building softwares. The more productive they can be, the more value they can bring for their costumers. That’s what they want.

Another important thing: in terms of ‘projects’, we can seriously think about not only one, but multiple projects. “One project is not a project” :) , so Nostromo must also care about this.

Who Nostromo users really are? Where do they live?

Users of Nostromo can be from all over the world. And it not only means that they’re teammates sitting together in one physical workplace. They can be separated as well, working on different points of the world, and not always in the same time. Think about freelancers. So it’s highly important for them to access they work anywhere they are, and anytime they need.

What do they like? What do they hate?

They like to see their projects, tasks, and to-dos in one place. They must see what to do next, what projects do they participate in, what tasks are they assigned to. It’s very obvious, that they hate the opposite of it. I mean: a blurred, crowded workplace, where is not clear what to do and how to do that. (but: who likes to work that way at all? :) )

What are Nostromo users’ cultural and social references?

As we are talking about here people working from all over the world in a digital environment, we should not forget that they can have very difficult cultural and social background, and it can effect the way they used to work or the way they use tools. I mean: if you have users sitting in an office in the U.S., and they have a new freelancer working from India, than the way they want to use things can be different. It’s not written in stone, but you must think about it when you plan the users’ experience.

What users want from Nostromo? What are their core need?

So what users want from Nostromo is what we discussed earlier: a clear, concentrated, digital workplace:

  • where everything is accessible what they need for their job
  • where they can communicate to each other
  • where it’s easy to show what to do or change
  • where nothing is standing in their way to work effectively and be productive
  • where it’’s possible to track the time they’ve worked on a project

What are the jobs of Nostromo users?

Users (teams) we’re talking about, typically working on softwares: building web sites, web applications, mobile applications etc.

What’s users’ work environment like?

As we know, the best way to work on software projects is to follow agile methodologies, so they need to work in an environment what fits to agile. I think most of you know what does it mean. But maybe someone does not.

For them, agile methodologies in a nutshell: Agile is a time boxed, iterative approach to software delivery that builds software incrementally from the start of the project, instead of trying to deliver it all at once near the end.

It works by breaking projects down into little bits of user functionality called user stories, prioritizing them, and then continuously delivering them in short two week cycles called iterations.

So users of Nostromo not only need their task to be clear and easy-to-access, but they also need to be handled dynamically, according to agile methods.

How does Nostromo’s offer fit to users’ tasks? How does it fit to the other products they use?

In case of Nostromo, we should concentrate on some very obvious things here. As the users work only on digital products, the main physical tool they need is their computer. (surprise!) No matter where and when they work, they are sitting at their computer. Yes, it’s very obvious, but it answers the questions above: they not only build digital softwares, but they use only digital softwares for building them also. Mainly web-based SaaS softwares. So Nostromo’s offer must fit to them.

2. SCOPE

Scope comes from the Strategy. At this step, we must think again of the tree from step Strategy.

You remember.. We must avoid what can be seen there. Everybody must know what to build exactly. That helps us a lot what we did in step Strategy. But we must keep our brakes ON here. And that’s what step Scope is for.

In this step, based on the strategy (the defined user needs) we set the requirements for the content and functionality. Our main goal here is to define all the features we need in our product. And we must do this carefully, because a lot of us tend to rush into the design and development process without really fully understanding everything that our solution needs to do. We have to properly define scope.

Questions to consider (based on user needs!)

  • what the feature set will be?
  • what are we creating exactly?

Here, we must talk about a very important thing: we must seriously think about the amount of features needed to implement.! I mean: there’s no need to provide 100 different features to the user, when they need only 5. The question here is also: what are our users’ exact needs? We should find them, define them carefully, and build them into the product. And no more. Setting our future set huge will not help us to create good User Experience.

Limiting the features worth it, if the product gives users better experience. Think about an example: IKEA

IKEA: everybody knows them. They’re selling furnitures. But what is the cause of their success? What does differentiate them from their competitors? The answer is: they limited the ‘feature set’. What it means here: if you walk into an IKEA store, there’s no big staff there helping you. You must chose the furnitures you need almost without any help. And what happens if you buy one and take it home? You need to rig up your furniture ON YOUR OWN! Because IKEA has not done that.. But how does the furnitures look like? They have an OUTSTANDING design! And that’s why everybody like them.

The point here is this: IKEA does not invest in big staff in their stores, and they do not rig up the furnitures (limited feature set). But this way, they can give their customers much better user experience giving an outstanding design (with a competitive price).

Scope of Nostromo

So based on the users’ needs defined in step ‘Strategy’, we can see what feature set Nostromo includes.

Model

First, we must clarify, what kind of model Nostromo uses. We know that users work only on digital products, on their computer, using other softwares to build them. So what is the best solution? A web-based SaaS tool used in desktops, of course. Nostromo works like that.

And what about mobile version? Obviously, it’s secondary.. (there must be only a small amount of people who can work on their little mobile devices effectively… :) )

Handling tasks

Ok, and what to do with the need of handling tasks easily, well-organized and also dynamically? Nostromo gives the best solution for that: an easy-to-use kanban board! Users can manage tasks organized in columns and cards with the option of editing and rearranging them anytime. Fits perfectly to the defined user needs.

Editing a task in Nostromo

Handling multiple projects

Handling multiple projects easily? No problem. Create multiple projects on separate kanban boards, and switch between them by 2 clicks. If you have pending projects, and you don’t know whether it will continue or not, just hibernate them. Old, finished projects? You can delete them, if you want.

Switch projects with 2 clicks
Delete a project, if you want

Accessing sources what are needed for the job

Have you ever spent long minutes to find some pictures, screenshots, texts or documents in your e-mail client? For sure.. But why aren’t they in the same place where you can access them easily anytime? Nostromo offers a very good feature for this in ’Design’: you can upload anything you want, and you can access them anytime you need.

Upload all the sources to the same place

Explaining effectively what to change

Nostromo has a very useful feature what is needed for explaining the changes are needed. (Especially useful for frontend developers)

User need is: define clearly what to do, on a picture or a screenshot..

Personally, I used to solve this problem in a difficult way:

  • screenshot with windows capture tool
  • drawing into them what I wanted to communicate
  • save
  • attach

But it’s not the best solution.. takes time, hard to change..

Nostromo offers a sophisticated solution for this. It’s as effective as it can be. It’s “seamless design collaboration”. Upload pictures or screenshots, mark the areas what you want to explain, attach your comments, and discuss them live, if you want. ž

Seamless design collaboration

Tracking working-time

It’s also a strong user need to keep the user’s job tracked by logging the hours user worked, and knowing which project should it’s connected to.

It’s very easy to do on Nostromo dashboards by adding logged ours to any card you worked on.

Add the numbers of hours you’ve worked on a card

It’s also possible to analyze working hours of any stakeholder in a project.

Check the hours a team worked on projects anytime

Finding tasks fast

There’s no need to make this complicated. A single search bar can do that. Nostromo has that, of course:

Search instantly with a well-known way

Accessing&assigning tasks

Finding your own tasks, and assign tasks to someone else when it’s needed. It also has to be solved in Nostromo. Fortunately, it’s easy to make this happen by using kanban board and cards:

Making a task as well-defined as possible

There’s one additional feature in Nostromo, what helps making tasks more defined: using labels. It’s also attached to the cards.

Make tasks more defined with labels

3.STRUCTURE

Now we have the Strategy and Scope — defined user needs and feature set based on them. It’s time to define, how things going to work. We’re talking about concrete things here that determine what people actually experience.

Here, we need to think about possible user behaviors in our product, and figure out how the system will respond to that behaviors. They’re calls and responses. From the users’ aspect: „I do this, and I get that”.

Main part in Structure called: interaction design.

(Note: interaction design is not interface design. Interaction design is about the structure of the experience that the person goes through, than it’s about what they see on the screen)

Interaction design:

- defines the structure and behavior of interactive systems

- creates meaningful relationships between people and the things they use

- effectively communicates interactivity and functionality

- it reveals both simple and complex workflows

- informs users about state changes

- prevents user error

Questions to consider here

- How users make interactions with the elements?

- Why is the user there? What is the user trying to do? What are their actions?

- How the system reacts to that? What will happen, when the user uses the system? (clicking on a link, sending a form, opening a menu, making a checkout for instance)

Good interaction design is:

- consistent

- visible

- learnable

- predictable

- provides feedback

Consistent

Consistent means here: if we create a layout, we create certain conventions. And by doing so we set expectations in the users mind on how things work. If a system is consistent, that means: similar components work similar way.

It might be a little wandering first, so let’s find some examples in Nostromo.

Consistency in Nostromo

Example1: A good example for consistency in Nostromo is the main ’frame’ of our workplace, highlighted on this picture:

Highlighted areas remain consistent, no matter what we do

You can see the main navigation area on the left, and a search area on the top. So we set 2 expectations: where the main navigation is, and where to search for content. When we choose a tab, and our dashboard changes, those 2 things remain consistent.

Tabbed navigation on the left and the header stay the same, the’re consistent

They’re in the same place, they’re visually represented the same way, and they act exactly the same.

Example2: We can find interactive elements working consistent on kanban boards. Just have a look at how to add cards or columns:

Adding new card/column always work the same way

It’s very easy. But the point here is: no matter which board and which column you edit, adding a card works exactly the same way everywhere. It’ consistent.

More examples: Nostromo provides us a lot more interactive elements working this way:

Adding a member to a card

Directly on the dashboard
In an opened card

Using “Actions”

Directly on the dashboard
In an opened card

Editing logged time

Directly on the dashboard
In an opened card

They are all working the same way everywhere on the workplace.

Visible

Good interaction design is visible, what can be also defined as ’discoverable’. This need is stem from human behavior. We generally expend the least amount of effort possible in everything. It’s not because something is wrong with us, or because we’re lazy. It’s just because we’re programmed that way.

And because of this we feel comfortable using a product if we find the things we need with as less effort as possible. Discoverability ensures that.

Visibility in Nostromo

Visibility or discoverability in Nostromo can be showed with it’s layout. Tabbed navigation on the left is fixed, you can discover it easily. Search bar and personal settings are also visible and can be reached no matter what you do. There’s a lot of space for your columns to discover the cards what you need. If you’re getting out of space on the screen, scroll bars appear on columns, not on the whole window. I think it’s the best solution to deal with the amount of cards.

Tabbed navigation and header are fixed

Click&tap

In general, people attempt interaction with anything that could possibly be clickable or touchable, if they can’t tell, what is clickable or touchable on a screen and what is not. Because of this, it’s very important that components should be understood to be interactive.

Click&tap in Nostromo

One example for this from Nostromo: ’plus’ buttons in cards are very interactive, they say you can ’add’ something. It’s our clear expectation and that’s what exactly happens when you click.

“Add” button’s function is very clear

Learnable

Interactions in a product should be easy to learn and easy to remember. Ideally: people use an interactive element once, learn it rapidly, and remember it forever.

In reality, they use it a few times, learn it, and hope they remember it next time..

So we can give best experience to our users if we design the elements learnable, intuitive.

It’s the best if they’re based on users’ earlier experiences.

Here, we must clarify the definition ’intuitive’:

“..intuitive is a term, what often gets misunderstood, but what intuitive really means is, single trial learning. … It doesn’t mean that we automatically recognize and know how to use everything that we see on the screen. What it really means is that we do it once and we remember forever…” (Joe Natoli)

Learnable elements in Nostromo

As I experienced, basic elements in Nostromo are absolutely learnable. I say this in a meaning what Joe Natoli says in his quote above.

Of course, you should learn how to deal with cards and columns, and boards. But once you’ve learned this, it’s easy and reflexible next time.

Predictable

Take a look at these questions:

- where are you?

- how did you arrive here?

- what can you do here?

- where can you go from here?

If users can answer these questions not matter which screen they’re on, your product definitely:

  • provide a strong sense of place
  • set the correct expectations
  • made it possible for people to accurately predict outcomes of their interactions

That means your product is predictable.

Predictability in Nostromo

The best example what I can show you for predictability from Nostromo comes up when you’re a newbie in this tool. Then, you must already know why you’re using the tool, why you’re there, but you don’t know how exactly to do that. Luckily, Nostromo’s little astronaut comes up then, and helps you out with a clear message! ;)

Astronaut wants you to add a column ;)

Provides feedback

Feedback gives a very important information to a user in terms of where he is and what he’s doing. It answers the burning questions from a persons mind at any point in their experience about:

  • location: „where am I?”
  • status: „whats’s happening?”
  • status: „is it still happening?”
  • future: „what will happen?”
  • outcomes: „has it happened?”

To understand the importance of this totally, just imagine that you’re in a Cartoon Heroe Webshop. You want to buy a sweet Minnie Mouse plush for your niece as a gift… You found it! Great! A „Buy Now” button is showing up there. Cool! You’re on your way! You click on it, hoping you’ll add your credit card details and close the process in 1 minute. But nothing happens. You click again.. and again.. and again.. but nothing.. What will happen now? Have you done something wrong? Or have you bought the Minnie plush you want without adding your card details? But wait.. You clicked „Buy Now” at least 100 times! Will you get 100 Minnie plushes? What will you do with them? And what if you clicked on the wrong button, and you’ll get 100 Grinch plushes instead.. You don’t even like Grinch! And neither your niece….

..of course this will not happen. But thoughts like this can always run through your (and other user’s) mind in a millisecond, if it’s not clear what exactly happens. That’s why every action should produce a visible, understandable and immediate reaction.

We must acknowledge interactions. Failing to acknowledge an interaction can lead to unnecessary repetition of actions and errors or mistakes. We must avoid unwanted consequences.

Providing feedbacks in Nostromo

What I realized in Nostromo, that it uses a very simple way to give feedback to me: a nice window with a short message ’Thank you!’:

Feedback after adding the time

Another way of feedback can be seen if we switch to board of a card:

Feedback after switching a board

4 .SKELETON

In step Skeleton, we must work on what form all the features we defined in step Surface will going to take.

This will enable positive experiences:

  • rapidly establish the product’s value in the user’s mind
  • lead user toward continuing the experience
  • introduce specific content at the most relevant, most appropriate points in the experience
  • every click should add immediate value

So all the actions we take on the screens, should add positively to the overall experience over time. All the smaller actions that we take, should lead up to some greater result. We should constantly feel like we are on the right path.

Questions to consider

  • what form will the product take?
  • how will users move around and do things?
  • how will content be presented and manipulated?

We can talk about 3 different parts of design here:

1.interface design

2.navigation design

3.information design

1.interface design

The most important principle of interface design is:

Predictability

“Predictablity means that we can accurately predict the outcome of an interaction with something. And when we can do that, we have a much higher degree of confidence in our ability to actually use what’s in front of us. That’s important, because, if we’re confident, if we’re comfortable, if we feel safe and secure, then we’re more likely to keep using something. “ (Joe Natoli)

If we saw an element in a product what we are familiar with because we’ve seen it other places before, than we know, how to use it, we can predict what will happen if we interact with it.

I try to explain this with a little function what I think all of us meet somewhere. It’s 3 little dots next to each other:

Maybe you say now that you’ve never met this before, but I think you did, but you didn’t realized that. It appears in a lot of applications what we use every day:

3 dots in WhatsApp
3 dots in Gmail
3 dots in Chrome
3 dots in Gmail
3 dots in Udemy

This icon can be horizontal or vertical. But we have a clear expectation on what this element will do if we click on it, because it’s in our subconscious mind, and we can use it by our reflexes. We do not even think about it what it is: an ’action’ window pops up:

Action window pops up everytime

Predictable interface design in Nostromo

No big surprise, 3 dots described above appear also in Nostromo, and have the same function:

And it’s the best solution for this function, because we already know what it means. There’s no need to reinvent the wheel.

Of course, we can find more elements int Nostromo acting like this. Just for example:

You can always add something with „+” icon
You can always edit with “pencil” icon

2.information design

Information design is about how to organize the information all over our product. It’s there, but you can’t really see it. It lives in between everything else, tying everything together. The funny thing is, that if information design is good, we typically don’t notice it. But when it’s bad, it’s really, really, really obvious.

What is the most important here is context and hierarchy. We must ask these questions:

  • are items that are functionally or logically connected group together visually?
  • is the information presented in order of importance to the user?

Information design solutions in Nostromo

Of course, we can find examples as answers to these 2 questions above in Nostromo.

Main functions, what separate our work, are grouped together and have the same visual style in the left side of our workplace. And they are in the order what we need to work effectively:

Navigation tab

Typically, when we work:

  • we select our PROJECT first
  • we PLAN what we will do in the selected project
  • we WORK on what we planned earlier
  • we need the DESIGN for our work
  • maybe we should check or restore something from the ARCHIVE items
  • and if we want to analyze our projects and work, we can access the REPORTS and the TIMESHEET

As these are the main functions, they also have a strong visual style.

We can find the opposite in the design area. Here are some secondary functions to design our folders. They are there, if we need them, but they’re not as strong as the main functions.

Secondary functions

It’s a very good example to that visual hierarchy on the screen absolutely matches the functional behavior.

An the order in this group of 4 buttons also presented in importance to the user: Edit — Download — Archive — Delete

3.navigation design

It’s easy to explain navigation design with a process called “The trunk test”.

What is it? Imagine, that you’re kidnapped and you’re in a trunk of a car. This car take a long distance in the city, and it changes its direction a lot. Tha car stops and now you are free. If you now exactly, where you are in the city without any instruction, you’ve passed the trunk test. If you say “I don’t know..”, then you have navigation problem..

I think there’s no need to explain this in the terms of a product. Users must be able to pass the trunk test.

Navigation design solutions in Nostromo

There is a standard solution in Nostromo’s navigation, what helps us to ‘pass the trunk test’, and it’s easy to use in any other product. It is what happens, when you choose a menu option from your workplace. The title of the screen changes and it tells us where we are know. And it’s exactly where we wanted to be. The menu text and the title says the same thing. It may sounds too simple, but it can be very confusing if the title don’t help you in the navigation this way..

Menu option we click on becomes the title

Menu option and title say the same. (“Profile”, “Settings” etc.) That sends a very clear, immediate, quick, almost subconscious signal to the user that “yes, this is the page I selected.That’s what I asked for”

A core element what helps us the most in navigation design:

Icons and labels

We must use representational icons. They have very clear meaning based on their similarity to familiar objects and/or actions. And not at least, we have seen them before elsewhere, so we know they should mean.

Representational icons

We shouldn’t use abstract icons, what are typically require context and experience to learn their meanings. And they don’t help in the users’ experience at all. Because our goal is to give our users the simplest and most understandable elements what are possible.

Abstract icons

So our job is here to find the most relevant and well-known icons for our functions. Guys at Nostromo have made a pretty good job in this.

Icons and labels in Nostromo

Icons in Nostromo are clearly representative:

Labels for navigation, links and buttons are also the simplest and they’re very clear. Some examples:

Labels are representational, clear

Things above may seem very obvious. But this is the point! We must design our elements as clear and simple as we can. That’s the way we can give good experience to our users.

Conventions and standards in navigation

There are some common navigation elements in websites what became conventions or standards over time. Those conventions tell us what to look for and where to look when we need them. Putting them in a standard place lets us locate them quickly. Because we saw them on the same place a hundred times. We’ll search them theres subconsciously.

Conventions and standards of navigation in Nostromo

On of these main commonalities is the header. The common elements what we can find here, are: logo, search bar, profile

Nostromo did a good job here. No confusion. These elements have gone to the common, right place, where everybody will look for them.

5. SURFACE

Step Surface represents what everybody curious about the most, what everybody wait sitting on nails. This motivates projects and products. “How will it look like?”

Step Surface is a sum total of all the work we done and all the decisions we’ve made this far in the process:

  • we state a very clear strategy as to what we are trying to achieve
  • we scoped the amount of work that needed to be done to achieve
  • we created a structure that supports that strategic vision
  • we created a skeleton which helped us figure out how all that stuff was going to be organized and how it was going to appear on the screen
  • and finally, we’re now at the point where we’re dealing with visual presentation
“..what we’re doing [here] is we’re creating a visible language. Just like written word communicates to people, visual language is the same way. The visual decisions that we make at this point need to do more than just sit there and look pretty. They need to work. They need to communicate content. They need to reinforce understanding. And the way that they do so in a way that is easily understood by the people who will be using what we produce.” (Joe Natoli)

Principles of good visual design, the “big four”

1.alignment

2.proximity

3.repetition

4.contrast

(ok, there’s so much other principles, but these are the most important based on Joe Natoli’s course. Joe Natoli says: “these are the underlying core just about everything that we see and interact with”)

1.alignment

This is the most important principle, which shouldn’t be screwed up.

The core thing is here: everything must be aligned in a ‘natural’ way, what means that our brain must be able to elaborate the elements with minimum amount of energy what’s possible.

Here’s what it means in the terms of text:

It’s easy to read the text in the left. Is it also easy to read the text in the right? No. Why? What’s the difference?

Tracking points on the left are in the same line. So, track back to the beginning of new lines do not take so much effort. It works subconsciously.

It’s very easy and obvious, but we must consider this when we align all the elements on a screen. I mean: titles, texts, images, videos, etc. Alignment provides cognitive stability, and creates visual relationships. Every element in a design should be aligned with one or more other elements. As Joe Natoli says: “align everything”.

It’s harder to align well everything on a screen than only a paragraph of text, but if we succeed, users can elaborate easily all the information we present them.

Grides can help us in planning, and we can have a look at to Nostromo’s visual design with their help.

Alignment in Nostromo

Groups, and relationships in the elements aligned perfectly. Just have a look at some screens with lines, and notice, how elements fit to these:

See how elements fit to the lines

2.proximity

With the help of proximity, we can make a huge step forward to our well organized screens. If we care about how things are grouped on our screen, and we keep the proximity consistent, we definitely do a good job. It will be easy to our users to understand, which elements related to each other and which are not.

Proximity in Nostromo

And that’s what we can see on Nostromo’s screens. Proximity between elements are very consistent and used at a lot of places the same way. Just have a look at these screens:

Check well-proportioned width of areas marked with green

3.repetition

Repetition doesn’t mean probably what it sounds like. it doesn’t mean that you just rubber stamp the same elements over and over and over again. It’s more subtle than that. It means instead, some elements on the screen uses similar style. They do not copies of each other, but they use the same background/font/color/size etc. So as they’re not totally different, they will not jar with each other.

It may a little confusing, so let’s pick up some good examples from Nostromo.

Repetition in Nostromo

Repitition of ‘clock’ icon
Repitition of ‘plus’ icon
Repitition of tabs

4.contrast

Contrast is one of the most important principles you can pay attention to make things instantly recognizable useful and usable. I could understand it best the first time with this extremely simple example.

  • Black text on a white screen
  • White text on a black screen

These are the 2 combinations easiest to read. Big contrast of the text and the background makes the text instantly recognizable.

Another big advantage of using contrast is that it drives user’s attention.

Let’s see how Nostromo is making a very good job also with this.

Contrast in Nostromo

With the contrast between the main tabs and the dashboard, our attention goes to the dashboard.

Contrast between navigation and dashboars

With the contrast between dashboard and cards, our attention goes to the cards. And that’s the point! As the cards presenting our plans, things-to-do s, our attention is the best place on them..

Contrast between dashboard and cards

Another very good example about using contrast in Nostromo is modal dialog boxes. We meet them, if we arrive to a task what is critical to do if we want to continue our work:

In these cases, contrast drives our attention to the box, and what we need to do. Actually, we are not able to look elsewhere at all.. :)


Thank you for investing your time for reading this. With UX basics and examples from Nostromo above, I hope I’ve helped to you in creating better User Experience next time.

If you liked this, please click the below so other people will see this here on Medium.

Are you interested in further stuffs? Follow me here, on Twitter or on Facebook.


Like what you read? Give Ákos Töttös a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.