Author Archives: irinampapuc

Who Knew Adobe CC Could Wireframe?


Wireframing is a major step in designing any user interface whether a website, application or software product. Without distraction in the form of visuals, colours, typography, styles and effects you can be more focused on defining content hierarchy and user experience.

Doing low fidelity wireframes and prototypes will help you test and iterate more often and in earlier phases, work faster and develop products that your users will love.

There are a lot of different wireframing tools to choose from in the wild. Which one you choose will depend on your personal preferences and workflow style.

Just like a lot of designers moving to digital design from the print world, I’m an expert in the Adobe applications like Illustrator, InDesign, and Photoshop. I can use them efficiently, everywhere and at any time (even if someone wakes me up in the middle of the night and refuses to give me a cup of coffee). However, these have also become the tools I use to do web and application visual design. So, for my workflow to be the most efficient I use them for wireframing too.

Who knew Adobe CC Could Wireframe

With every project, I usually start designing by doing very rough sketches on paper, or lately more often, if not near my office desk, on my iPad or smartphone screen. These sketches are there only to focus my thoughts regarding the chosen concept and the client will probably never see any of them. When I feel confident enough that my idea works, I jump right away into wireframing. I usually use Adobe Illustrator and InDesign combined. Illustrator for creating most of the UI kit elements and InDesign for wireframing itself.

In this article, I’ll explain a step by step process of how to incorporate those tools into your wireframing workflow as well. But, before I go into details, let me show you what the strengths and weaknesses are of using InDesign as a primary wireframing tool.

The Pros and Cons of Using Adobe InDesign as a Wireframe and Prototyping Tool

For some time now Adobe InDesign has been not only a desktop publishing application, but it’s also widely used for digital publishing and EPUB creation, and there are also some reasons why it is a suitable tool for wireframing too:

  • Master pages – You can quickly and consistently apply global design elements like navigation, headers, footers and so on. You can create as many master pages as you need, and on top of it, one master can be based on another.
  • Solid grid support – Allows you to create easily and apply different kinds of grids, complementing columns, horizontal and vertical guides to create modules, and subgrids for greater complexity and precision.
  • Alternate layouts – Enables wireframes for multiple devices and orientations in the same file.
  • CC Libraries – Give easy access and reuse different assets like commonly used objects, colours, character and paragraph styles. Create assets in InDesign, Illustrator, Photoshop or with the Adobe Capture mobile app, whichever you prefer.
  • Layers – Provide you the ability to organize, group, show/hide and lock/unlock objects and content selectively in the wireframe. Every page of a multi-page InDesign document has the same number and order of layers. All of the changes you make to layers are reflected on all pages, like visibility, stacking order or deletion.
  • Styles and tables – Give complete control over the look of your text, objects and tables through the use of InDesign styles. Styles can be based on each other providing the ability to cascade desired formatting easily throughout the document. Creation and formatting of tables that you can use as wireframe content elements or even helpers for layout purpose is very simple.
  • Typekit integration – In high fidelity mock-ups, you can use any of the Typekit fonts that sync to the desktop.
  • Interactivity and animations – You can use Adobe InDesign built-in interactivity and animation features to create different states of the web or application design for interaction. Most people use these features while creating magazines for Digital Publishing Solution and fixed layout EPUB export but they can be suited for prototyping as well.
  • Export options – InDesign can export the wireframes and prototypes you create in a variety of formats. Interactive PDF will probably be your format of choice in the majority of cases, but you can also use quite new Publish Online Feature to convert your document to interactive HTML that can be viewed in modern desktop and mobile browsers. Unfortunately, you don’t have any control over the export using Publish Online, and exported file is hosted on Adobe servers. You can share the prototype URL to your client, or embed it into your site. For more control and direct export to HTML5 you can use the in5 extension from Ajar Productions.

Adobe InDesign has many pros to be used as a wireframe and prototyping tool, but it also has some disadvantages:

  • Lack of predefined wireframe templates and elements – Since InDesign is not meant to be a wireframing tool, you have to create and prepare templates and object assets by yourself. (I’ll show you how to make that preparation step later in this article.) The good news is that most of this work will be done only once and after a few hours of work you’ll be ready to jump start your InDesign wireframing. Also, there are a lot of assets and wireframe kits that you can download from the internet, so there is no need to draw everything yourself.
  • Interactivity and animation features are limited and can be time-consuming – Although you can easily connect pages and add some interactivity and animations that process sometimes takes a long time. Some of the simple interactions can not be achieved simply, and you have to figure out how to do it. If you haven’t been using InDesign interactivity features yet, you’ll have a slight learning curve before you’ll be able to apply them efficiently.
  • InDesign documents can’t export directly as layered PSD files – If you do your visual design in Adobe Photoshop and want to have separated wireframe elements from building your design on, then you have to export your wireframes to PDF first, then open that PDF in Illustrator and export as layered PSD. People working on the Mac can also use a free script written by Rob Day to save InDesign files as a layered PSD.

Good Wireframe Preparation is Half of the Work

Start by fine tuning your working environment. If you do not already have a saved Workspace in Illustrator and InDesign for this kind of work, create one. In Illustrator start with predefined Web workspace and adapt it to your convenience: close panels you will not use often and open the ones you will, then rearrange them to suit your work style. When done, save the workspace by choosing Window > Workspace > New Workspace… Do the same thing in InDesign using Digital Publishing workspace as a starter.

Assembling Wireframe/Mockup/Prototype Kits

Efficient wireframing workflow using Illustrator and InDesign requests that you invest some time in making your user interface assets kit first. Since the introduction of Adobe Creative Cloud, CC Libraries are the best way for storing all your UI kits components.

You can create one or more Libraries for wireframing and prototyping purposes. For example, you can create one Library for websites wireframing, other for iOS application, third for Android applications and so on.

To create library Open Libraries panel and choose Create New Library from additional drop-down menu. Assets you put in libraries can be made and used in different Adobe desktop or mobile apps on all devices you log into with your Adobe ID. That means you can start with the project on your iPad or iPhone, continue on the desktop computer in the office and made last minute changes on home laptop with all the same assets available on all devices. If you work as a part of a larger team, library assets can be shared between team members and you can collaborate on them. Libraries can contain colours, graphics, layer styles (Photoshop only), paragraph and character styles. You add asset in library by clicking on the corresponding button at the bottom of CC Library panel with respective element selected. You can also add graphic assets by dragging them directly from your artboard to Libraries panel. Assets in libraries are organized by categories. To stick with good practices, rename each asset with meaningful name. Libraries are searchable, and finding an asset in a hip by typing beginning of it’s name will save you tons of time, especially when you have many different items in libraries. You can search only current or all libraries created. To change asset name just double click on it and type a new one.

Creating Kits Components

Although Adobe InDesign has some basic drawing tools that are pretty similar to Illustrator’s, Illustrator is a much better choice for drawing different kinds of elements in your wireframe. As a rule of thumb, make all kit elements that request some drawing beyond basic geometric shapes in Illustrator and simpler elements, that contain text you’ll need to change in layout, like simple buttons, in InDesign.

For starters, make a list of all the elements in the wireframe you’ll need, like navigation elements, page elements including images, video frames and text boxes, icons, avatars, form elements and all other interface elements. After your list is completed you can head to Illustrator and InDesign for elements creation. Start by creating a new document for wireframe or mockup kit components. Double-check that you choose either Web/Devices Profile in Illustrator or Web/Digital Publishing Intent from New Document dialog box, so pixels are used as units, and color mode is RGB.

Make wireframe kit assets as simple as possible, because they need to give fast visual cues for what they represent without been too much detailed. You should use very limited colour palettes of preferably a few shades of grey. Visually accentuate elements that are more important by coloring them with darker shades, or by giving them bigger contrast. For higher fidelity mockups or prototypes, you’ll create UI kits with more detailed elements that use each project’s respective color palette. For easy access to color palettes add them to CC Libraries too.

Who knew Adobe CC Could Wireframe

Adobe Illustrator assets in CC Libraries

Assets you add to Libraries from Illustrator are linked by default (since Adobe CC 2015). That means that when you modify a library asset in Illustrator, changes are reflected in all instances used. If you want to add unlinked asset to document press Option/Alt key while dragging it from the panel.

Who knew Adobe CC Could Wireframe

When you use linked Illustrator assets in InDesign they have little cloud icon in the upper left corner when document is viewed in Normal mode and they are all listed in Links panel. If you modify Library asset in Illustrator changes in the InDesign document won’t be done automatically. Cloud icon will be replaced with Modified Link exclamation mark icon, and you’ll have to update these links.

InDesign assets you place in InDesign document are not linked. That means that you can edit instances independently of the original, and when the original asset is modified those changes are not reflected on assets you already put into layout.

Who knew Adobe CC Could Wireframe

Use those properties when creating wireframes on your behalf: add assets to Library from Illustrator when you assume they’ll need to be modified and updated globally or add them from InDesign when you know you’ll want to modify them individually. Note that you can also make graphics in Illustrator and then Copy/Paste them to InDesign, modify if needed and then add to Library as InDesign asset.

If you happen to forgot which graphic asset is created by which application look at the right side of each item in Library panel while using Show items as a list preview more.

Adobe InDesign Flexibility with Texts

Since you’ll probably want to be able to easily change texts and its formatting create text based assets in InDesign. InDesign has a nice feature for filling text boxes with placeholder text. When you draw text box just make a right mouse click on it and choose Fill With Placeholder Text. You can easily add text box to Library like any other graphic element just by dragging. When you use those text assets later as a part of your wireframes layout you can modify text box itself or text it contains however you like.

Consider to make button UI elements in InDesign too. To create a button, make text frame first, type respective text in it and then use Object > Text Frame Options to define Inset spacing. Adjust Vertical Justification of text inside a box by choosing desired option from Align drop-down menu. Switch to Auto-Size tab and choose appropriate Auto-Sizing (that would probably be Width Only), and convenient reference point. If you do not want let InDesign break your text in more than a one line check No Line Breaks option.

Give Yourself a Hand

There are lot of Adobe Illustrator wireframing and prototyping UI kits available on the internet you can buy or even download for free if you want to fasten your wireframing preparation phase. Maybe you already have lot of those elements drawn that you can dig from your achieved projects. Open those documents, tweak any previously made elements if needed, and put them into respective Libraries.

If you are designing for a particular platform, for example iOS or an Android application be sure that you carefully read their human interface guidelines and use appropriate assets. Don’t put pressure on yourself that every asset possible has to be in your Libraries before you start with actual wireframing process because you can also add assets to your libraries later and on the go.

Creating InDesign Wireframe Templates

Who knew Adobe CC Could Wireframe

There is another important preparation step left that you also need to do: create InDesign templates you’ll use for making wireframes. Start by creating a new document with Web or Digital Publishing Intent and define appropriate page size for the screens you are designing for. Since it is recommended that you use some kind of a grid for laying out your wireframe elements set up the margins and create column grid by setting number of columns and the gutter space. You can change those settings later from Layout > Margins and Columns with respective master page (or pages) selected in Pages panel. If you need horizontal guides and complementary vertical guides, create them manually or make additional grid by using Layout > Create Guides… When creating grid you can help yourself with one of the online grid calculator tools like the Gridulator.

You can also create additional templates for presentation purposes with device mockup as a frame for your wireframes. Since one InDesign document can be placed into another, you can create wireframes in one InDesign document and then place it into another one for presentation purposes. Although it might seem complicated at first it is actually very simple and offers effective workflow. Keeping actual wireframe in separate document makes it easier to continue building from approved wireframes to polished visual design. On the other hand, you have presentation ready template to place wireframes into, add labels and comments and you are all set up to show your best to the client. When you make modifications on wireframe file just update it like any other link in presentation document, and ta-daaa! all changes are in your presentation too.

In the Layers panel you can prepare separate layers for different kind of the content: user interface elements, interactive features, gestures, labels or notes. If you’ll need more layers for a specific project you’ll be able to easily add them anytime during the wireframing process.

When you are done with creating save your templates as InDesign .indt template files. After all the templates you need are saved you are finally ready to start with wireframing efficiently.

Building Wireframes

First things first – start with the Master page. Drag all elements that will be the same on all screens of your project from Library. If you are designing website those are usually headers with logo and navigation and footer. Since you can make more than one Master page and they can be based on each other don’t forget to take advantage of that feature. For example, depending on the project, you can create a Master page for one website category, then make new Masters based on the first one and change on them only elements that need to be different for other categories you’re also having.

Who knew Adobe CC Could Wireframe

You can’t select, change or delete Master elements on regular document pages unless you click on them while holding Command/Control + Shift to override the master. Once your element is overridden you can change any of its parameters or completely delete it from layout. Keep in mind that even when you override the element, it’s parameters that you haven’t change are still dependent on the Master. For example, if you override an element and change it’s color, it’s size is still connected to Master’s and if you change it on Master page it will also be modified on that element you previously overrided. When inserting additional pages to your wireframing document remember to base them on the respective master. If you need to change the Master for pages already in layout, select them in Pages panel, make a right click and choose Apply Master to Pages… When you are finished with Masters, move along with pages for all screens of your project. Use Library assets and arrange them using Smart Guides and Align options to create final UI wireframe layout.

If you are making design for more than one screen size, make alternate layouts from Layouts > Create Alternate Layout or Pages panel. You can use liquid layout rules when creating alternate layouts to automatically or semi-automatically adopt page elements from one size and orientation to another or you can manually control them. For applying and testing Liquid Layout Rules use Page Tool or open panel: Window > Interactive > Liquid Layout.

Who knew Adobe CC Could Wireframe

Adding interactivity

Adobe InDesign has a bunch of interactivity features that you can take advantage of when creating wireframes or prototypes. Which features you’ll include depends on the final format you plan to save your wireframes, prototypes or presentation into. If you are exporting as PDF, interactivity is limited but you can at least make links between screens work. You’ll use Hyperlinks panel to create them. Select the item you want to behave as a link and click on New Hyperlink icon. From Link To drop down menu choose Page and enter desired page number. Repeat that action on all items you want to behave as links between the screens. You can also add hyperlinks to objects residing on the Master pages, and that can be a real time saver: create links on Master page once and they will work on all screens of your document.

Another interactive feature that you can use in interactive PDF format is button with Show/Hide action and that you can use to build all kinds of pop-up content.

You can create button from any graphic, text, image or a group. To create a button from a selected object use Window > Interactive > Buttons and Forms panel and click on the Convert to Button icon. Buttons can have different states created for Normal, Rollover and Click appearance. To add rollover or click state to button click on them in Buttons panel to activate and then edit button appearance for that state the way you want it to look. To add an action to a button, click on a plus sign and choose it from the list. Take into account that actions under SWF/EPUB will not work in interactive PDF. For creating popup elements choose Show/Hide Buttons and Forms. To hide buttons until triggered check Hidden Until Triggered option. You can include multistate objects in interactive PDF, but only if you export them as SWF first and then place those SWFs back in InDesign layout for PDF export. That workflow is tedious and those PDFs can not be properly seen in all PDF readers so you better avoid doing this unless really necessary.

If you want to convert your document to HTML prototype using InDesign CC 2015 Publish Online feature you can use much more interactive options like animations, multistate objects, multiple button actions, including all those intended for SWF/EPUB export.

You can add simple animations using Animation panel and choosing one of the built-in Presets from drop-down menu and setting its properties. One object can have only one animation applied, but if you need to add more of them, group your object with empty box and use the new animation on that newly created object. And repeat that few times if needed. For objects you need to show different states create multi state object. Create object for each state. Object can be a single element (picture, text box, graphic) or a group of different elements. Open Window > Interactive > Object States panel, select all objects you created for multi state object and click on the New button at the panel bottom. After your multi state object is made you’ll need to create buttons to go from one object state to another. Go To Next State or Go To Previous State actions reveal the specific object state with Go to State action.

If you want to have scrollable frame in your wireframe/prototype easiest way to create one is by usingUniversal Scrolling Frames extension from Ajar Productions. After you download and install extension you can use it as InDesign panel. For scrollable frame you’ll need to make content and one frame for container. Content can be text frame, picture, or more elements combined. If using more than one element as a content don’t forget to group them. When you are finished with making content and container box select the content and do Edit > Cut. Then select container and paste content inside by using Edit > Paste Into. Select container and using Universal Scrolling Frames adjust desired scroll direction.

By combining buttons, multistate objects, animations and scrollable frames you can achieve rich interactive experience.

To test interactivity in InDesign use EPUB Interactivity Preview panel. You can preview single page or whole document. Enlarge preview panel to your convenience.

If you haven’t being using Adobe InDesign interactive features yet be prepared that they have some learning curve, but with a little practice and few trial and error attempts you’ll quickly master them.

Exporting finished documents

When you are done with the wireframe and presentation file making all that is left is show your great ideas to the client in best way possible. For that purpose you’ll need to export your wireframes in one of the formats your client can preview. Although InDesign files can be exported in variety of formats you are probably going to use the most common Interactive PDF, or Publish Online feature if testing functional low or high fidelity prototypes. To save as interactive PDF choose Adobe PDF (Interactive) from Format drop-down menu in Export dialog box and adjust properties as needed. Do not forget to tick Forms and Media if there are interactive elements that you want to include. Clients can view PDF wireframes in free Adobe Reader and write all their comments in that same file.

You can also use PDF document you export from InDesign to create InVision (or some other tool that supports PDFs) prototype. If your standard prototyping tool, perhaps Marvel, can’t import PDF export your InDesign wireframe pages as JPEG or PNG images.

To export interactive HTML prototype that can be seen in modern browsers on different devices go to File > Publish Online or click on the Publish Online button from Application Bar. After the document is prepared to be published online and then uploaded you can copy document URL to share with all the stakeholders and start with reviewing process. You can also embed that published prototype on your site.

Downside of Publish Online feature is that it doesn’t have any additional control over the export and files are always stored at Adobe’s servers. Also it’s still preview feature and you can’t be sure in which direction Adobe is going to develop it or even discontinue.

Once your wireframe/prototype is exported it’s time for testing, reviewing and iterating process to start.

This article was written by  IVANA MILIČIĆ, a Toptal freelance designer.

How To Communicate The Value Of User Research


The beginning of a new project: Your client needs help with a redesign of its website or application.

“We want to improve the user experience, it has to be jaw-dropping for our customers, we want them to fall in love with our product.”

Here is the good news: Your client is aware of User Experience (UX), cares about customers’ needs and sees the value in investing in a great user experience. They asked for an expert with UX skills to help, but do theyreally understand what it means to deliver an exceptional user experience?

User research is a vital component of UX design. Don’t let anyone tell you otherwise.

User research is a vital component of UX design. Don’t let anyone tell you otherwise.

UX is more than a bunch of rules and heuristics that you follow in your product design process. UX is subjective, as the name suggests. It is the (subjective) experience that a user gets while using a product. Therefore, we have to understand the needs and goals of potential users (and those are unique for each product), their tasks, and context.

As a UX expert you should already be familiar with the maxim, It all starts with knowing the user.

Now for some bad news; this is the point when you discover your client’s misconceptions about UX.

UX expert: “Ok, let’s start with your users: Who are they? What do they do? What do they want? What are some of their pain points? I would like to talk to them, observe them, learn from them…”

Client: “Oh, we don’t need user research, that’s a waste of time.”

Wrong!

In this post I will try to explain why, and hopefully, help fellow UX specialists in their efforts to convince clients that good UX is next to impossible if it is not preceded by good user research.

No Need For User Research? There Is Always A Need For User Research

You cannot create a great user experience if you don’t know your users or their needs.

Don’t let anyone tell you differently. Don’t simply accept the common argument that there is no time or money to do any user research for your project.

User research should shape your product design and define guidelines that will enable you to make the right UX decisions.

User research should shape your product design and define guidelines that will enable you to make the right UX decisions.

User research will shape your product; it will define the guidelines for creating a product with a good experience. Not spending any time on research, and basing all of your design decisions on best guesses and assumptions, puts you at risk of not meeting your user needs.

This is how senior UX architect Jim Ross UXmatters sees it:

“Creating something without knowing users and their needs is a huge risk that often leads to a poorly designed solution and, ultimately, results in far higher costs and sometimes negative consequences.”

Lack Of User Research Can Lead To Negative Consequences

Skipping user research will often result in “featurities,” decisions that are driven by technical possibilities and not filtered by user goals.

“My wife would really enjoy this feature! Oh, and I heard from this person that they would like to be able to xyz, so let’s add it in there too.”

This leads to things such as overly complex dashboards in cars, where the user’s focus should be on driving, not on figuring out how to navigate an elaborate infotainment system.

Many users find automotive infotainment systems overly complex and distracting. Identifying the target audience is crucial to good UX design.

Many users find automotive infotainment systems overly complex and distracting. Identifying the target audience is crucial to good UX design.

Tesla’s cutting edge infotainment system, based on Nvidia Tegra hardware, employs two oversized displays, one of which replaces traditional dials, while the other one replaces the center console. Yes, it looks good, but it was designed with tech savvy users in mind. In other words, geeks will love it, but it’s clearly not for everyone. It works for Tesla and its target audience, but don’t expect to see such solutions in low-cost vehicles designed with different people in mind.

Poorly designed remote controls are not intuitive, so casual users tend find them overwhelming, resulting in a frustrating user experience.

Old remote controls are another example of hit and miss UX. There is little in the way of standardization, so each one takes time getting used to.

Old remote controls are another example of hit and miss UX. There is little in the way of standardization, so each one takes time getting used to.

But what about the purely digital user experience? Too many fields in a form, or too much information may overwhelm and drive your users away.

Poorly designed digital interfaces can drive users away. Even if they don’t, they will annoy users and feel like a waste time.

Poorly designed digital interfaces can drive users away. Even if they don’t, they will annoy users and feel like a waste time.

Instead of creating the opposite behaviour, poorly designed and implemented interfaces are more likely to scare off potential users.

Start User Research With Sources For Existing Information

Yes, user research will expand the timeline and it won’t come cheap, but both time and costs can be minimized. You can start with existing, and easy accessible, sources of information about user behaviour to gain a better understanding of user needs. These are:

  • Data Analytics
  • User Reviews and Ratings
  • Customer Support
  • Market Research
  • Usability Testing

Quality user research requires time and resources. However, you can start by using existing information to get a sense of what your users need.

Quality user research requires time and resources. However, you can start by using existing information to get a sense of what your users need.

Let’s take a closer look at each of these sources.

Data Analytics

If you are working with an existing product, your client might have some data and insights about its use. Data analytics assist with getting a good overview about general usage: How many visitors are coming to the website, what pages are most visited, where do visitors come from, when do they leave, how much time do they spend where, and so on.

But here is what this data is not telling you: How does the experience feel? What do users think about your service, and why are they spending time on your website? Why do they leave?

For example, your data indicates that users are spending a lot of time on a specific page. What it doesn’t tell you is why. It might be because the content is so interesting, which means users found what they were looking for. On the other hand, it could be an indication that users are looking for something they cannot find.

Data Analytics is a good starting point, but it needs further qualitative data to support the interpretation of the statistics.

User Reviews And Ratings

Your client’s product might have received some user feedback, already. There might be a section for feedback or ratings on the website itself, but external sources may be available as well. People might have talked about it in blog posts or discussion boards, users may have given app reviews in an app store. Check different sources to see what users are saying.

However, be aware of limitations. People tend to leave reviews and ratings about negative experiences. Don’t take this as a reason to shy away from user reviews or to ignore feedback!

“All these complainers… These aren’t the users we want, anyway!”

Instead, try to look for patterns and repetitive comments. Here are a few tips for making the most from user input:

  • Check whether any action has been taken on negative comments.
  • Compare the timing of negative comments to releases and changelogs. Even great apps can suffer from poor updates, leading to a lot of negative comments in the days following the update.
  • Do your best to weed out baseless comments posted by trolls.
  • What are users saying about the competition? Identify positive and negative differentiators.
  • Don’t place too much trust in “professional and independent” reviews because they can be anything but professional and independent.

User reviews are a good source for collecting information on recurrent problems and frustrations, but they won’t give you an entirely objective view of what users think about your product.

Customer Support

Your client might have a customer support hotline or salespeople who are in touch with the user base. This is a good resource to get a better understanding of what customers are struggling with, what kind of questions they have, what features/functionality they are missing.

Setting up a couple of quick interviews with call center agents, and even shadowing some of their calls, will allow you to collect helpful data without investing too much time or money.

Customer support provides you with a good opportunity to learn about potential areas for improvement, but you will have to dive in deeper to get detailed information about problems.

Market Research

Your client may have some basic information about the customer base, such as accurate demographic information, or a good understanding of different market segments. This information is valuable to understand some of the factors behind the buying decision.

It does not offer any information about the usage of the product, though.

Market research is a good source of information if you need a better understanding of how your client thinks, what their marketing goals are, and what their market looks like. However, it won’t reveal all relevant details about user goals or needs.

Usability Testing

If you are lucky, your client might have done some usability tests and gained insights about what users like or dislike about the product. This data will help you understand how people are using the product and what the current experience looks like.

It is not quantitative research, and therefore you won’t get any numbers and statistics, but it helps you identify major problems, and gives you a better understanding about howyour user group thinks.

There is also the option to do some quick remote testing session by using services such as usertesting.com.

Usability tests are another good way of identifying key problem areas in a product.

How To Educate Your Client About The Value Of User Research

The budget might be small and the timeline tight, but ignoring user research will eventually bite you. Help your clients avoid pitfalls by making them aware of the benefits of user research.

What’s the ROI of good user experience? Knowledgeable UX experts must be able to communicate the value of user research to clients.

What’s the ROI of good user experience? Knowledgeable UX experts must be able to communicate the value of user research to clients.

Here are some common arguments against user research and how to deal with them:

  • We don’t need user research. We trust in your skills as a UX expert

As a UX designer, you need to view user research as part of your toolkit, just like a hammer or saw for a craftsman. It helps you to apply your expertise in practice. No matter how much expertise you have as a designer, there is no generic solution for every problem. The solutions always depend on the user group and the environment, so they need to be defined and understood for every product.

User research will help get an unbiased view, to learn about users’ natural language, their knowledge and mental models, their life context.

You are the UX design expert, but you are not the user.

  • Just use best practices instead of research

Best practices originate from design decisions in a specific context; the digital industry is evolving at a rapid pace, design trends and recommendations change constantly, there is no fixed book of rules. We need to be able to adjust and adapt. Those decision should be made based on research, not practices employed by others, on different projects.

  • We already know everything about our users

Invite your client to a user needs discovery session to observe how users are using the product. Start with small tests and use remote usability testing tools such asusertesting.com to get some quick insights and videos of users in action.

The outcome might be a user journey map or a user task flow. Aim for a visualized document that identifies outstanding questions so you can define areas that need more research.

  • We have personas, we don’t need more research

Personas are a good tool for making your target group more tangible, and for becoming aware of different needs, key task flows and and how that might vary for different groups. It’s the common ground and a good starting point.

However, to redesign a product you need a better understanding of the usage. You need to know how people work with your product, what they do with it, when they get frustrated.

Ask for further details about user stories and task flows to make use of personas.

  • We don’t have the budget for it

The above list of sources for information about user behaviour should give you a good starting point for sharing ideas with your client on how to gain user information on a (very) tight budget.

Make your client aware of the risks if product design decisions are made without a good understanding of the user.

User Research Is The Basis Of Every Good User Experience

User experience is still a bit of a “mystery” in many circles: Everybody talks about it yet it is hard to define, as a good experience is in the eye of every user.

It is, therefore, key to gaining a sound understanding of the context, the user goals, and the thinking necessary for designing a truly exceptional user experience.

The more transparent you are with your work process, the better your client will understand your tools and the information you need to make good decisions.

While some clients may not be open to the idea of using additional resources on research, it’s necessary for experience specialists to explain the value of user research, and to argue for further research when necessary. To accomplish this, UX designers will require negotiating skills to make their case.

Luckily, proper user research is beneficial to clients and UX designers, so convincing clients to divert more resources towards research should be feasible in most situations. Reluctant clients may be swayed if you manage to devise a cost-effective user-research method, and I hope some of the tips and resources in this article will help boost user research, even if money is tight.

The original article was written by  FRAUKE SEEWALD, a Toptal web designer.

Are All Trends Worth It? Top 5 Most Common UX Mistakes That Designers Make


As web designers, we are constantly trying to create a great user experience and help users achieve their goals. In our daily work, we are using all kinds of common patterns and trends. In my experience, I have seen how those patterns and trends can easily steer both clients and designers/developers in the wrong direction. It’s no secret that from time to time we all get sidetracked with things that seem or look cool. I admit, I’ve fallen into those traps on plenty of occasions myself — I’ve opted to create something visually appealing and sacrificed the usability because of it. Why did I do it? I presumed a wow moment will happen and magically engage the user. I hoped this wow effect would make a long lasting impact. The sobering moment came when I found out my users had a hard time understanding the interface I had created and was proud of. Sometimes you learn the hard way.

Top 5 Common UX Design Mistakes

The lesson I learnt was that to avoid a bumpy ride for our users, we must always ask ourselves what is under the shiny surface of the user interface we are creating. It’s worthwhile to stop before embracing any patterns or trends and think about the value they provide. As Kate Rutter brilliantly said, “ugly but useful trumps pretty but pointless”.

Please don’t get me wrong — I am not suggesting we shouldn’t make things pretty — I am suggesting we should aim to make things usable and pretty. The key with patterns and trends is to find a balance between what looks nice and the value behind them.

In this article, I will list several common UX mistakes I see on a daily basis. While they are not all bad per se, they can be dangerous if not implemented with caution. I’ll also share some insight on how you can improve the usability when implementing those trends or even suggest an alternative solution. Without further ado, let us get on with the list.

Common Mistake #1: Large, Fixed Headers

We’re seeing more and more of tall, sticky headers — branding blocks and menus that have a fixed position and take up a significant amount of the viewport. They stay glued to the top and often block the content underneath them. I’ve seen headers on high-production websites that are over 150 pixels in height, but is there real value behind them? I might be pushing it a little bit, but large, fixed headers remind me of the dreaded and now ancient HTML frames. Yikes! Fixed elements can have real benefits, but please be careful when dealing with them — there are a number of important things to take into account. When implementing sticky headers, bear in mind a couple of common mistakes you want to try to avoid:

Too Large for Comfort

If the decision to design a large, fixed header has already been made, do some testing to find out if large is too large. Make sure not to go overboard and stuff the header with too much content, which will result in a super tall element. With the fixed header in place, browsing should still be comfortable and fast for your users. If you are having doubts about the sheer size of the header, try making it smaller without sacrificing too much of the visual appeal and brand presence. Failing to find a good balance could result in a somewhat claustrophobic experience for your users and leaving a small amount of room for the main content.

Last year, I have been working on a project where the client insisted on a sticky navigation bar on the desktop resolution. Even though the bar was not especially tall, I feared some users might get that claustrophobic feeling of being boxed in. My workaround was simple — by giving the nav bar a slight transparency using CSS, the users were able to see through the bar, which made the content area feel bigger. Here is that small piece of CSS code, so why not try and see if that works for you too.

.header { opacity: 0.9; }

Here is an example I found in the wild. Recently, I stumbled upon ATP’s player profile page on Roger Federer.

Its fixed header has a height of about 110px, and when you scroll down the page, a sub navigation appears, making the header 160px high. That is over 30% of the entire page height on my MacBook Pro with the dock open.

Not Fixing The Problem on Mobile

Granted, a lot of users will be using a huge screen, and sticky menus could be a plus on super big resolutions, but what about the smaller resolutions and the mobile world? Bear in mind that a significant portion of your users will be using a small resolution device, so for mobile, position: fixed is probably not the way to go. Thankfully, responsive techniques allows us to design a different solution and stick with the sticky for large resolutions only. The mobile-first approach will provide a lot of the answers — start with the mobile resolution, with only the essential content, and work your way up.

Coffee with a Cop also has a fixed header, but much smaller — less than 80 pixels.

This is arguably a good solution on large resolutions, as it enables quick and easy navigation. On small resolutions, the header is also fixed and takes up a considerable amount of the viewport. I would advise against a sticky header on mobile and suggest a sticky hamburger icon, which would open up a menu when tapped on. Although this pattern is not a universal problem solver, it does free up a significant amount of space. On smartphones and tablets, space can be precious.

Common Mistake #2: Thin Fonts

Thin fonts seem to be everywhere — numerous native mobile apps and modern websites. With screen technology advancing and rendering improving, a lot of designers are opting for thin (or light) fonts in their designs. They are elegant, fresh, and fashionable. However, thin type can cause usability problems. One of the main goals of any text is to be legible, and thin type can affect legibility in a major way. Keep in mind that not everyone will be using your website on a display that will render the thin type well. For instance, I have found thin type extremely difficult to read on my iPhone and iPad with Retina display. Before thinking about the look and feel of font, let’s step back for just a second.

If users can’t read the words in your app, it doesn’t matter how beautiful the typography is

From the Apple Human Interface Guidelines:

Above all, text must be legible. If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.

Apple is referring to mobile apps, but the exact same principle applies to all websites. As Colm Roche said,legibility ≠ optional, but mandatory for good usability. There is no point putting content on a website if most of your users can barely read it, is there?

Here are some of the common mistakes you might want to bear in mind before putting your type on a diet:

Using Thin for Thin’s Sake

As with any trend, it is dangerous to use it simply because others are using it. Fonts should not only look good. First and foremost, they should be legible and provide a stepping stone to good usability. The decision to use thin type simply because of the fact that it looks good is bound to backfire. In his excellent talk More Perfect Typography, Tim Brown talks about a sweet spot at which a typeface sings. This sweet spot would be a combination of size, weight and color where you set the foundation of your website.

To make sure you have found a good body font and hit that sweet spot, do some testing in various environments. Which leads us to the next mistake worth avoiding:

Not Testing the Legibility on All Major Devices

Thin type may look good on your display and you may not have a hard time reading it, but be aware of the fact that you are not your user. Invest in usability testing to find out if your real users are happy with the typography on all major devices: desktop computers, laptops, tablets and smartphones. While doing mobile testing, have your participants use your website on mobile devices in daylight — your real users will not always have perfect browsing conditions. If you had to read something on a mobile device on a sunny day, you probably know how difficult it can be. If you decide to use a thin font on your website, there’s a simple way to adapt to mobile users. I will show a solution on a website I saw recently:

Oak does a fine job of adapting to the needs of the users — on the desktop resolution, their H1 heading has a very thin font weight. Since the heading is large and had a good color contrast, I suspect legibility does not suffer. On mobile, where the size of the heading is significantly smaller, the weight is slightly thicker, which surely aids legibility. Clearly, they have spotted legibility issues with thin fonts on small sizes and implemented a greater font weight through media queries. Their solution is simple, but very effective.

Common Mistake #3: Low Contrast

Low color contrast has become somewhat of a trend in user interface design in recent years. We have already covered thin fonts, which create a low type contrast, but there is much a bigger trap you can fall in — a combination of thin type with low color contrast will make yours truly really scratch his head and think have we lost our minds? Of course, not all low contrast is bad. It can even add to the visual appeal if designed with care. But as is the case with all UX mistakes, it is important not to go over the top and keep usability in mind.

A couple of major mistakes you might want to avoid while dealing with contrast are:

Low Color Contrast in Body Copy

While low color contrast is not exclusively bad, it can have quite a bad impact on the usability of your website and make text very hard to read for some of your users. If this article inspires you to increase color contrast on one thing only, make that your main body copy. It is most probably the least favorable area to experiment.

Cool Springs Financial uses a thin variant of Helvetica for body text. While it looks elegant and contributes to an aesthetically pleasing user interface, it is difficult to read on a number of platforms.

I did a quick test on a MacBook Pro with retina display, as well as an iPhone and an iPad with retina display. The screenshot is from my MacBook Pro which reveals contrast and legibility problems. I had a hard time reading the text on the website on all of my devices.

Not Testing the Contrast

Consider doing some user testing to avoid issues down the road. I already hear some of my clients and colleagues go “Bojan, user testing is time-consuming and expensive”. It can be, but it really does not take an awful lot to test the contrast on your website. Start with body copy and work your way up. There is a nifty tool called Colorable which will help you set a correct text contrast according to the WCAG accessibility guidelines. Once you know you are using correct text contrast, adjust other colors on your website and do quick user tests to make sure most of your users have a pain-free time. I doubt low contrast will cause a rebellion, but it could frustrate a lot of your users.

Common Mistake #4: Scroll Hijacking

Another trend we’re seeing a lot of is the scroll hijack. Websites that implement this trend take control of the scroll (usually with JavaScript) and override a basic function of the web browser. The user no longer has full control of the page scroll and is unable to predict its behavior, which can easily lead to confusion and frustration. It’s a risky experiment that could hurt the usability, so I advise great caution.

If you’re set on implementing a scroll hijack, you might want to try and avoid the following mistakes:

Using the Hijack Just Because It’s Trendy

Some websites can get away with scroll hijacking, but that is no guarantee your website can. Trends and patterns can’t be blindly followed and implemented. For example, we’re seeing many designers follow Apple’s presentational pages with scroll hijacking, parallax effects and high resolution images of various devices. Apple has their own reasons, their own users, a unique concept, and unique content. Since every website has unique problems, it also must have solutions tailored for those problems.

Not Testing on Actual Users

To avoid issues when borrowing ideas or patterns, make sure to test the prototype of your website on users. Simple usability testing will reveal whether the implementation of the scroll hijack is feasible or not. Testing will surely answer a lot of questions and provide clues on how you can improve upon your idea. Without testing, you have no way of knowing which way to go and developing websites based on assumptions are often costly in the long run.

Tumblr uses scroll hijacking on their current homepage. While their implementation could also be a risky one, it seems they understand their target audience, the content and concept supports it, and that they have addressed many of the user needs. When the user attempts to scroll down the page, the scroll is hijacked by the website, but the user is then quickly taken to the next section of the homepage. The content is broken into several sections or blocks, which are clear to distinguish and big indicator dots are fixed on the left side of the viewport. As a result, the homepage feels like a huge carousel you have control over, rather than an experimental website with a mind of its own.

Common Mistake #5: Ineffective Carousels

Carousels are very common on the web, and have been for a long time. While they can be effective, they can also turn into a nightmare if not designed and developed carefully. The nightmare for your users could be the fact that they are having difficulties understanding it. The nightmare for you could be the fact that your users are not seeing the important content in some of the slides of the carousel.

Carousels with no content of importance: not the most effective use of space on your website

Carousels with no content of importance: not the most effective use of space on your website

A lot of carousels I’m seeing have similar downsides. Some of those are:

Lack of Real Value for the Users

What is the real value the carousel offers to your users? If done right, a carousel should engage your users and help them achieve their goals quickly and pain-free. I often see carousels that do not provide additional value, but appear to be mere decoration. Here is a quick test you can do: take a post-it and write down three benefits of the carousel for the user. If you fail to think of three, there is a good chance your carousel needs more work.

Too many slides could have a negative effect on the users and they might simply choose to ignore the carousel. Usability guru Jakob Nielsen suggests the following:

Include five or fewer frames within the carousel, as it’s unlikely users will engage with more than that. While more than five could be too many, less than three could indicate a better solution is well-advised. One of the premises for a carousel is the fact that you need a lot of content fitted into a small amount of space, but with just two slides, why not show both slides at a time and forget about sliding altogether?

The previous and next Arrows and Slide Indicators Are Not Obvious and/or Accessible

Make sure you are making your precious content accessible. Important information in a carousel could remain hidden if the next and previous arrows are not obvious and large enough for a comfortable click. Oh, and do not forget the tap — your mobile users will thank you.

Sometimes, there are no arrows in a carousel, and the indicator dots are links for jumping between slides. Remember that you need to provide a nice, big clickable and tappable area (I recommend 35x35px at the very least). Otherwise, the small targets might lead to a very frustrating target practice and an exit from your website.

The Floresta Longo Foundation website has a carousel of images in the header. It has an autoplay and slides through five photographs. The previous and next arrows are small and are transparent which makes them both hard to spot and hard to click or tap. There are no indicators of the slide you are on and no labels showing what the photograph represents. The images are not links and act as a decoration. While the carousel may hold some value of engaging the user, it certainly leaves a lot to be desired.

Conclusion

I have listed several common UX mistakes in some of the current web trends. If you have implemented or are thinking about implementing any of them, I sincerely hope this article has provided something you will find useful. As a UX designer, use your best judgement and do not be afraid to improvise, but always remember to keep your users in mind.

Feel free to start a conversation below. I would love to read about your experiences, points of view, or suggestions on how to make things better.

The original article is from Toptal. Find more UX resources here.

The 5 Most Common UI Design Mistakes


Although the title UI Designer suggests a sort of departure from the traditional graphic designer, UI design is still a part of the historical trajectory of the visual design discipline.

With each movement or medium, the discipline has introduced new graphic languages, layouts, and design processes. Between generations, the designer has straddled the transition from press to xerox, or paper to pixel. Across these generations, graphic design has carried out the responsibility of representing the visual language of each era respectively.

Therefore, as UI Design makes the transition out of its infancy, what sort of graphic world can we expect to develop? Unfortunately, based on the current trajectory, the future may look bleak. Much of UI Design today has become standardized and repeatable. Design discussions online involve learning the rules to get designs to safely work, rather than push the envelope, or imagine new things. The tendency for UI Designers to resort to patterns and trends has not only created a bland visual environment, but also diminished the value of the designer as processes become more and more formulaic. The issue is precisely not one of technicalities, but of impending visual boredom.

Thus, the Top Five Common UI Design mistakes are:

  • Following Design Rules
  • Abusing the Grid
  • Misunderstanding Typefaces
  • Patterns and the Standardization of UI Design
  • Finding Safety in Contrast

UI Design Rule Book

Understand principles and be creative within their properties. Following the rules will only take your where others have been.

Common Mistake #1: UI Designers Follow the Rules

The world of graphic design has always followed sets of rules and standards. Quite often in any design discipline, the common mistakes that are made can closely coincide with a standard rule that has been broken. Thus, from this perspective the design rules seem to be pretty trustworthy to follow.

However, in just about any design discipline, new design movements and creative innovation has generally resulted from consciously breaking said rule book. This is possible because design is really conditional, and requires the discretion of the designer, rather than a process with any sort of finite answers. Therefore, the design rules should likely be considered as guidelines more so rather than hard and fast rules. The experienced designer knows and respects the rule book just enough to be able break the box.

Unfortunately, the way that design is often discussed online is within sets of do’s and don’ts. Top mistakes and practices for design in 10 easy steps! Design isn’t so straightforward, and requires a much more robust understanding of principles and tendencies, rather than checklists to systematically carry out.

The concern is that if designers were to cease ‘breaking the rules’, then nothing new creatively would ever be made. If UI designers only develop their ability to follow guidelines, rather than make their own decisions, then they may quickly become irrelevant. How else will we argue a value greater than off the shelf templates?

Be Wary of Top Ten Design Rules

The issue with design rules in today’s UI design community is they are so abundant. In the interest of solving any problem, the designer can look to the existing UI community and their set of solutions, rather than solve an issue on their own. However, the abundance of these guides and rules have made themselves less credible.

A google search for “Top UI Design Mistakes” yields a half million search results. So, what are the chances that most, if any of these authors of various articles agree with one another? Or, will each design tip that is discussed coincide accurately with the design problems of a reader?

Often the educational articles online discuss acute problems, rather than the guiding design principles behind the issue. The result is that new designers will never learn why design works the way that it does. Instead, they only become able to copy what has come before. Isn’t it concerning that in none of these sorts of articles is something like play encouraged?

The designer should have a tool kit of principles to guide them, rather than a book of rules to follow predetermined designs. Press x for parallax scrolling and y for carousels. Before choosing, refer to most recent blog post on which navigational tool is trending. Boring!

Trends are like junk food for designers. Following trends produces cheap designs that may offer some initial pay back, but little worth in the long run. This means that not only may trendy designers become dated, or ineffective quickly. But, for you the designer, don’t expect to experience any sense of reward when designing in this way. Although working to invent your own styles and systems is a lot of work, it’s so worth it day in and day out. There’s just something about copying that never seems to feed the soul.

Common Mistake #2: Allowing the Grid to Restrict UI Design

Despite my treatise against rules – here’s a rule: there is no way for a UI Designer to design without a grid. The web or mobile interface is fundamentally based on a pixel by pixel organization – there’s no way around it. However, this does not necessarily mean that the interface has to restrict designers to gridded appearances, or even gridded processes.

Using the Grid as a Trendy Tool

Generally, making any design moves as a response to trends can easily lead to poor design. Perhaps what results is a satisfactory, mostly functional product. But it will almost certainly be boring or uninteresting. To be trendy is to be commonplace. Therefore, when employing the grid in a design, understand what the grid has to offer as a tool, and what it might convey. Grids generally represent neutrality, as everything within the restraints of a grid appear equal. Grids also allow for a neutral navigational experience. Users can jump from item to item without any interference from the designer’s curatorial hand. Whereas, with other navigational structures, the designer may be able to group content, or establish desired sequences.

UI Design Rule Book

Although a useful tool, the grid can be very limiting to designers.

Defaulting to the Grid as a Work Flow

Dylan Fracareta, faculty of RISD and director of PIN-UP Magazine, points out that “most people start off with a 12 – column grid…because you can get 3 and 4 off of that”. The danger here is that immediately the designer predetermines anything that they might come up with. Alternatively, Fracareta resides to only using the move tool with set quantities, rather than physically placing things against a grid line. Although this establishes order, it opens up more potential for unexpected outcomes. Although designing for the browser used to mean that we would input some code, wait, and see what happens. Now, web design has returned to a more traditional form of layout designer that’s “more like adjusting two sheets of transparent paper”. How can we as designers benefit from this process? Working Without a Grid Although grids can be restricting, they are one of our most traditional forms of organization. The grid is intuitive. The grid is neutral and unassuming. Therefore, grids allow content to speak for itself, and for users to navigate at their will and with ease. Despite my warnings towards the restrictiveness of grids, different arrays allow for different levels of guidance or freedom.

Common Mistake #3:The Standardization of UI Design with Patterns

The concept of standardized design elements predates UI design. Architectural details have been frequently repeated in practice for typical conditions for centuries. Generally this practice makes sense for certain parts of a building that are rarely perceived by a user. However, once architects began to standardize common elements like furniture dimensions, or handrails heights, people eventually expressed disinterest in the boring, beige physical environment that resulted. Not only this, but standardized dimensions were proven to be ineffective, as although generated as an average, they didn’t really apply to the majority of the population. Thus, although repeatable detail have their place, they should be used critically.

If we as designers choose to automate, what value are we providing?

If we as designers choose to automate, what value are we providing?

Designers Using the Pattern as Product

Many UI designers don’t view the pattern as a time saving tool, but rather an off the shelf solution to design problems. Patterns are intended to take recurring tasks or artefacts and standardize them in order to make the designer’s job easier. Instead, certain patterns like F Pattern Layouts, Carousels or Pagination have become the entire structure of many of our interfaces.

Justification for the Pattern is Skewed

Designers tell themselves that the F shaped pattern exists as a result of the way that people read on the web.Espen Brunborg points out that perhaps people read this way as a result of us designing for that pattern. “What’s the point of having web designers if all they do is follow the recipe,” Brunborg asks.

Common Mistake #4: Misunderstanding Typefaces

Many designer’s quick tips suggest hard and fast rules about fonts as well. Each rule is shouted religiously, “One font family only! Monospaced fonts are dead! Avoid thin fonts at all costs!”. But really, the only legitimate rules on type, text and fonts should be to enforce legibility, and convey meaning. As long as type is legible, there may very well be an appropriate opportunity for all sorts of typefaces. The UI Designer must take on the responsibility of knowing the history, uses, and designed intentions for each font that they implement in a UI.

Consider a Typeface Only for Legibility

Typefaces convey meaning as well as affect legibility. With all of the discussion surrounding rules for proper legibility on devices etc, designers are forgetting that type is designed to augment a body of text with a sensibility, as much as it is meant to be legible. Legibility is critical, I do not dispute this – but my point is that legibility really should be an obvious goal. Otherwise, why wouldn’t we have just stopped at Helvetica, or maybe Highway Gothic. However, the important thing to remember is that fonts are not just designed for different contexts of legibility. Typefaces are also essential for conveying meaning or giving a body of text a mood.

Typefaces are each designed for their own uses. Don’t allow narrow minded rules to restrict an exploration of the world of type.

Avoiding Thin Fonts At All Costs

Now that the trend has come (and almost gone?), a common design criticism is to avoid thin fonts entirely. In the same way thin fonts came as a trend, they may leave as one also. However, the hope should be to understand the principles of the typefaces rather than follow trends at all.

Some say that they’re impossible to read or untrustworthy between devices. All legitimate points. Yet, this represents a condition in the current discussion of UI design. The font choice is only understood by designers as technical choice in regards to legibility, rather than also understanding the meaning and value of typefaces. The concern is that if legibility is the only concern that a designer carried, would thin fonts be done away with entirely?

Understand why you are using a thin font, and within what contexts. Bold, thick text is actually much more difficult to read at length than thinner fonts. Yet, as bold fonts carry more visual weight they’re more appropriate for headings, or content with little text. As thin fonts are often serifs, its suitability for body text is entirely objective. As serif characters flow together when read in rapid succession, they make for much more comfortable long reading.

As well, thin fonts are often chosen because they convey elegance. So, if a designer was working on an interface for a client whose mandate was to convey elegance, they might find themselves hard pressed to find a heavy typeface to do the job.

Not Enough Variation

A common mistake is to not provide enough variation between fonts in an interface. Changing fonts is a good navigational tool to establish visual hierarchy, or potentially different functions within an interface. A crash course on hierarchy will teach you that generally the largest items, or boldest fonts, should be the most important, and carry the most visual weight. Visual importance can convey content headings, or perhaps frequently used functions.

Too Much Variation

A common UI Design mistake is to load in several different typefaces from different families that each denote a unique function. The issue with making every font choice special, when there is many fonts, is that no font stands out. Changing fonts is a good navigational tool to establish visual hierarchy, or potentially different functions within an interface. Therefore, if every font is different, there is too much confusion for a user to recognize any order.

Common Mistake #5: Under/Over Estimating the Potential of Contrast

A common mistake that appears on many Top UI Design Mistake lists is that designers should avoid low contrast interfaces. There are many instances in which low contrast designs are illegible and ineffective – true. However, as with the previous points, my worry is that this use of language alternatively produces a high contrast design culture in response.

Defaulting to High Contrast

The issue is that high contrast is aesthetically easy to achieve. High contrast visuals are undeniably stimulating or exciting. However, there are many more moods in the human imagination to convey or communicate with, other than high stimulation. To be visually stimulating may also be visually safe.

The same issue is actually occurring in sci-fi film. The entire industry has resorted to black and neon blue visuals as a way to trick viewers into accepting ‘exciting’ visuals, instead of new, creative, or beautiful visuals. This article points out what the sci-fi industry is missing out on by producing safe visuals.

Functionally, if every element in an interface is in high contrast to another, then nothing stands out. This defeats the potential value of contrast as a hierarchical tool. Considering different design moves as tools, rather than rules to follow is essential in avoiding stagnant, trendy design.

Illegibly Low Contrast

The use of low contrast fonts and backgrounds is a commonly made mistake. However, rather than being a design issue. This could potentially be discussed as a beta testing mistake, rather than a design mistake.

How the design element relates as a low contrast piece to the rest of the interface is a design concern. The issue could be that the most significant item hierarchically is low in contrast to the rest of the interface. For the interface to communicate its organizational structure, the elements should contrast one another in a certain way. This is a design discussion. Whether or not it is legible is arguably a testing mistake.

The point is that in only discussing contrast as a technical issue resolvable by adjusting a value, designers miss out on the critical understanding of what contrast is principally used for.

Conclusion

As with the previous 4 mistakes, the abuse of patterns will rarely result in a dysfunctional website, but rather just a boring one. The mistake is in being safe. This overly cautious method of design may not cause the individual project to fail. However, this series of safe mistakes performed by the greater web community can mean greater failures beyond the individual UI design project. The role of the designer should be to imagine, thoughtfully experiment and create – not to responsibly follow rules and guidelines.

The original article is found on the Toptal Design Blog.

Top 10 Most Common Mobile App Design Mistakes


The mobile app market is saturated with competition. Trends turn over quickly, but no niche can last very long without several competitors jumping onto the bandwagon. These conditions result in a high failure rate across the board for the mobile app market. Only 20% of downloaded apps see users return after the first use, whereas 3% of apps remain in use after a month.

If any part of an app is undesirable, or slow to get the hang of, users are more likely to install a new one, rather than stick it out with the imperfect product. Nothing is wasted for the consumer when disposing of an app – except for the efforts of the designers and developers, that is. So, why is it that so many apps fail? Is this a predictable phenomenon that app designers and developers should accept? For clients, is this success rate acceptable? What does it take to bring your designs into the top 3% of prosperous apps?

The common mistakes span from failing to maintain consistency throughout the lifespan of an app, to attracting users in the first place. How can apps be designed with intuitive simplicity, without becoming repetitive and boring? How can an app offer pleasing details, without losing sight of a greater purpose? Most apps live and die in the first few days, so here are the top ten most common mistakes that designers can avoid.

Only 3% of mobile apps are in use after being downloaded.

Only 3% of mobile apps are in use after being downloaded.

Common Mistake #1: A Poor First Impression

Often the first use, or first day with an app, is the most critical period to hook a potential user. The first impression is so critical that it could be an umbrella point for the rest of this top ten. If anything goes wrong, or appears confusing or boring, potential users are quickly disinterested. Although, the proper balance for first impressions is tricky to handle. In some cases, a lengthy onboarding, or process to discover necessary features can bores users. Yet, an instantly stimulating app may disregard the need for a proper tutorial, and promote confusion. Find the balance between an app that is immediately intuitive, but also introduces the users to the most exciting, engaging features quickly. Keep in mind that when users are coming to your app, they’re seeing it for the first time. Go through a proper beta testing process to learn how others perceive your app from the beginning. What seems obvious to the design team, may not be for newcomers.

Improper Onboarding

Onboarding is the step by step process of introducing a user to your app. Although it can be a good way to get someone quickly oriented, onboarding can also be a drawn out process that stands in the way of your users and their content. Often these tutorials are too long, and are likely swiped through blindly.

Sometimes, users have seen your app used in public or elsewhere, such that they get the point and just want to jump in. So, allow for a sort of quick exit strategy to avoid entirely blocking out the app upon its first use. To ensure that the onboarding process is in fact effective, consider which values this can communicate and how. The onboarding process should demonstrate the value of the app in order to hook a user, rather than just an explanation.

Go easy on the intro animation

Some designers address the issue of a good first impression with gripping intro animations to dazzle new users. But, keep in mind that every time someone wants to run the app, they’re going to have to sit through the same thing over and over. If the app serves a daily function, then this will tire your users quickly. Ten seconds of someone’s day for a logo to swipe across the screen and maybe spin a couple times don’t really seem worth it after a while.

Common Mistake #2: Designing an App Without Purpose

Avoid entering the design process without succinct intentions. Apps are often designed and developed in order to follow trends, rather than to solve a problem, fill a niche, or offer a distinct service. What is the ambition for the app? For the designer and their team, the sense of purpose will affect every step of a project. This sensibility will guide each decision from the branding or marketing of an app, to the wireframe format, and button aesthetic. If the purpose is clear, each piece of the app will communicate and function as a coherent whole. Therefore, have the design and development team continually consider their decisions within a greater goal. As the project progresses, the initial ambition may change. This is okay, as long as the vision remains coherent.

Conveying this vision to your potential users means that they will understand what value the app brings to their life. Thus, this vision is an important thing to communicate in a first impression. The question becomes how quickly can you convince users of your vision for the app? How it will improve a person’s life, or provide some sort of enjoyment or comfort. If this ambition is conveyed quickly, then as long as your app is in fact useful, it will make it into the 3%.

Often joining a pre-existing market, or app niche, means that there are apps to study while designing your own. Thus, be careful how you choose to ‘re-purpose’ what is already out there. Study the existing app market, rather than skimming over it. Then, improve upon existing products with intent, rather than thoughtlessly imitating.

Common Mistake #3: Missing Out On UX Design Mapping

Be careful not to skip over a thoughtful planning of an app’s UX architecture before jumping into design work. Even before getting to a wireframing stage, the flow and structure of an app should be mapped out. Designers are often too excited to produce aesthetics and details. This results in a culture of designers who generally under appreciate UX, and the necessary logic or navigation within an app. Slow down. Sketch out the flow of the app first before worrying too much about the finer brush strokes. Often apps fail from an overarching lack of flow and organization, rather than imperfect details. However, once the design process takes off always keep the big picture in mind. The details and aesthetic should then clearly evoke the greater concept.

Common Mistake #4: Disregarding App Development Budget

As soon as the basis of the app is sketched, this is a good time to get a budget from the development team. This way you don’t reach the end of the project and suddenly need to start cutting critical features. As your design career develops, always take note of the average costs of constructing your concepts so that your design thinking responds to economic restraints. Budgets should be useful design constraints to work within.

Many failed apps try to cram too many features in from launch.

Many failed apps try to cram too many features in from launch.

Common Mistake #5: Cramming in Design Features

Hopefully, rigorous wireframing will make the distinction between necessary and excessive functions clear. The platform is already the ultimate swiss army knife, so your app doesn’t need to be. Not only will cramming an app with features lead to a likely disorienting User Experience, but an overloaded app will also be difficult to market. If the use of the app is difficult to explain in a concise way, it’s likely trying to do too much. Paring down features is always hard, but it’s necessary. Often, the best strategy might be to gain trust in the beginning with a single or few features, then later in the life of the app can new ones be ‘tested’. This way, the additional features are less likely to interfere with the crucial first few days of an apps’ life.

Common Mistake #6: Dismissing App Context

Although the conditions of most design offices practically operate within a vacuum, app designers must be aware of wider contexts. Although purpose and ambition are important, they become irrelevant if not directed within the proper context. Remember that although you and your design team may know your app very well, and find its interfacing obvious, this may not be the case for first time users, or different demographics.

Consider the immediate context or situation in which the app is intended to be used. Given the social situation, how long might the person expect to be on the app for? What else might be helpful for them to stumble upon given the circumstance? For example, UBER’s interface excels at being used very quickly. This means that for the most part, there isn’t much room for other content. This is perfect because when a user is out with friends and needing to book a ride, your conversation is hardly interrupted in the process. UBER hides a lot of support content deep within the app, but it only appears once the scenario calls for it.

Who is the target audience for the app? How might the type of user affect how the design of the app? Perhaps, consider that an app targeted for a younger user may be able to take more liberties in assuming a certain level of intuition from the user. Whereas, many functions may need to be pointed out for a less tech savvy user. Is your app meant to be accessed quickly and for a short period of time? Or, is this an app with lots of content that allows users to stay a while? How will the design convey this form of use?

A good app design should consider the context in which it is used.

A good app design should consider the context in which it is used.

Common Mistake #7: Underestimating Crossing Platforms

Often apps are developed quickly as a response to changing markets or advancing competitors. This often results in web content being dragged into the mobile platform. A constant issue, which you’d think would be widely understood by now, is that often apps and other mobile content make poor transitions between the desktop, or mobile platforms. No longer can mobile design get away with scaling down web content in the hope of getting a business quickly into the mobile market. The web to mobile transition doesn’t just mean scaling everything down, but also being able to work with less. Functions, navigation and content must all be conveyed with a more minimal strategy. Another common issue appears when an app developing team aspires to release a product simultaneously on all platforms, and through different app stores. This often results in poor compatibility, or a generally buggy, unpolished app.The gymnastics of balancing multiple platforms may be too much to add onto the launch of an app. However, it doesn’t hurt to sometimes take it slowly with one OS at a time, and iron out the major issues, before worrying about compatibility between platforms.

Common Mistake #8: Overcomplicating App Design

The famous architect Mies Van der Rohe once said, “It’s better to be good than to be unique”. Ensure that your design is meeting the brief before you start breaking the box or adding flourishes. When a designer finds themselves adding things in order to make a composition more appealing or exciting, these choices will likely lack much value. Continue to ask throughout the design process, how much can I remove? Instead of designing additively, design reductively. What isn’t needed? This method is directed as much towards content, concept and function as it is aesthetics. Over complexity is often a result of a design unnecessarily breaking conventions. Several symbols and interfaces are standard within our visual and tactile language. Will your product really benefit from reworking these standards? Standard icons have proven themselves to be universally intuitive. Thus, they are often the quickest way to provide visual cues without cluttering a screen. Don’t let your design flourishes get in the way of the actual content, or function of the app. Often, apps are not given enough white space. The need for white space is a graphic concept that has transcended both digital and print, thus it shouldn’t be underrated. Give elements on the screen room to breath so that all of the work you put into navigation and UX can be felt.

The app design process can be reductive, rather than additive.

The app design process can be reductive, rather than additive.

Common Mistake #9: Design Inconsistencies

To the point on simplicity, if a design is going to introduce new standards, they have to at least be consistent across the app. Each new function or piece of content doesn’t necessarily have to be an opportunity to introduce a new design concept. Are texts uniformly formatted? Do UI elements behave in predictable, yet pleasing ways throughout the app? Design consistency must find the balance between existing within common visual language, as well as avoiding being aesthetically stagnant. The balance between intuitive consistency and boredom is a fine line.

Common Mistake #10: Under Utilizing App Beta Testing

All designers should analyze the use of their apps with some sort of feedback loop in order to learn what is and isn’t working. A common mistake in testing is for a team to do their beta testing in-house. You need to bring in fresh eyes in order to really dig into the drafts of the app. Send out an ad for beta testers and work with a select audience before going public. This can be a great way to iron out details, edit down features, and find what’s missing. Although, beta testing can be time consuming, it may be a better alternative to developing an app that flops. Anticipate that testing often takes 8 weeks for some developers to do it properly. Avoid using friends or colleagues as testers as they may not criticize the app with the honesty that you need. Using app blogs or website to review your app is another way to test the app in a public setting without a full launch. If you’re having a hard time paring down features for your app, this is a good opportunity to see what elements matter or not.

The app design market is a battleground, so designing products which are only adequate just isn’t enough. Find a way to hook users from the beginning – communicate, and demonstrate the critical values and features as soon as you can. To be able to do this, your design team must have a coherent vision of what the app is hoping to achieve. In order to establish this ambition, a rigorous story-boarding process can iron out what is and isn’t imperative. Consider which types of users your app may best fit with. Then refine and refine until absolutely nothing else can be taken away from the project without it falling apart.

The original article was written by KENT MUNDLE – TECHNICAL EDITOR @ TOPTAL on the Toptal Design Blog

Top Ten Front-End Design Rules For Developers


As front-end developers, our job is, essentially, to turn designs into reality via code. Understanding, and being competent in, design is an important component of that. Unfortunately, truly understanding front-end design is easier said than done. Coding and aesthetic design require some pretty different skill sets. Because of that, some front-end devs aren’t as proficient in the design aspect as they should be, and as a result, their work suffers.

My goal is to give you some easy-to-follow rules and concepts, from one front-end dev to another, that will help you go from start to finish of a project without messing up what your designers worked so hard on (or possibly even allowing you to design your own projects with decent results).

Of course, these rules won’t take you from bad to magnificent in the time it takes to read one article, but if you apply them to your work, they should make a big difference.

Do Stuff In A Graphics Program

It’s truly rare that you complete a project, and go from start to finish while maintaining every single aesthetic mutation in the design files. And, unfortunately, designers aren’t always around to run to for a quick fix.

Therefore, there always comes a point in any front-end job where you end up having to make some aesthetic-related tweaks. Whether it’s making the checkmark that shows when you check the checkbox, or making a page layout that the PSD missed, front-enders often end up handling these seemingly minor tasks. Naturally, in a perfect world this wouldn’t be the case, but I have yet to find a perfect world, hence we need to be flexible.

A good front-end developer has to use professional graphics tools. Accept no substitute.

A good front-end developer has to use professional graphics tools. Accept no substitute.
For these situations, you should always use a graphics program for mockups. I don’t care which tool you choose: Photoshop, Illustrator, Fireworks, GIMP, whatever. Just don’t just attempt to design from your code. Spend a minute launching a real graphics program and figuring out how it should look, then go to the code and make it happen. You may not be an expert designer, but you’ll still end up with better results.

Match the Design, Don’t Try To Beat It

Your job is not to impress with how unique your checkmark is; your job is to match it to the rest of the design.

Those without a lot of design experience can easily be tempted to leave their mark on the project with seemingly minor details. Please leave that to the designers.

Developers have to match the original front-end design as closely as possible.

Developers have to match the original front-end design as closely as possible.
Instead of asking “Does my checkmark look amazing?” you should be asking, “How well does my checkmark match the design?”

Your focus should always be on working with the design, not on trying to outdo it.

Typography Makes All the Difference

You’d be surprised to know how much of the end look of a design is influenced by typography. You’d be just as surprised to learn how much time designers spend on it. This is not a “pick-it-and-go” endeavor, some serious time and effort goes into it.

If you end up in a situation where you actually have to choose typography, you should spend a decent amount of time doing so. Go online and research good font pairings. Spend a few hours trying those pairings and making sure you end up with the best typography for the project.

Is this font right for your project? When in doubt, consult a designer.

Is this font right for your project? When in doubt, consult a designer.
If you’re working with a design, then make sure you follow the designer’s typography choices. This doesn’t just mean choosing the font, either. Pay attention to the line spacing, letter spacing, and so on. Don’t overlook how important it is to match the typography of the design.

Also, make sure you use the right fonts in the correct spot. If the designer uses Georgia for headers only and Open Sans for body, then you shouldn’t be using Georgia for body and Open Sans for headers. Typography can make or break aesthetics easily. Spend enough time making sure you are matching your designer’s typography. It will be time well spent.

Front-end Design Doesn’t Tolerate Tunnel Vision

You’ll probably be making small parts of the overall design.

Tunnel vision is a common pitfall for front-end developers. Don’t focus on a single detail, always look at the big picture.

Tunnel vision is a common pitfall for front-end developers. Don’t focus on a single detail, always look at the big picture.
An example I’ve been going with is making the checkmark for a design that includes custom checkboxes, without showing them checked. It’s important to remember that the parts you are making are small parts of an overall design. Make your checks as important as a checkmark on a page should look, no more, no less. Don’t get tunnel vision about your one little part and make it something it shouldn’t be.

In fact, a good technique for doing this is to take a screenshot of the program so far, or of the design files, and design within it, in the context in which it will be used. That way, you really see how it affects other design elements on the page, and whether it fits its role properly.

Relationships And Hierarchy

Pay special attention to how the design works with hierarchy. How close are the titles to the body of text? How far are they from the text above them? How does the designer seem to be indicating which elements/titles/text bodies are related and which aren’t? They’ll commonly do these things by boxing related content together, using varying white space to indicate relationships, using similar or contrasting colors to indicate related/unrelated content, and so on.

A good front-end developer will respect design relationships and hierarchy. A great developer will understand them.

A good front-end developer will respect design relationships and hierarchy. A great developer will understand them.
It’s your job to make sure that you recognize the ways in which the design accomplishes relationships and hierarchy and to make sure those concepts are reflected in the end product (including for content that was not specifically designed, and/or dynamic content). This is another area (like typography) where it pays to take extra time to make sure you’re doing a good job.

Be Picky About Whitespace And Alignment

This is a great tip for improving your designs and/or better implementing the designs of others: If the design seems to be using spacings of 20 units, 40 units, etc., then make sure every spacing is a multiple of 20 units.

This is a really drop-dead simple way for someone with no eye for aesthetics to make a significant improvement quickly. Make sure your elements are aligned down to the pixel, and that the spacing around every edge of every element is as uniform as possible. Where you can’t do that (such as places where you need extra space to indicate hierarchy), make them exact multiples of the spacing you’re using elsewhere, for example two times your default to create some separation, three times to create more, and so on.

Do your best to understand how the designer used whitespace and follow those concepts in your front-end build.

Do your best to understand how the designer used whitespace and follow those concepts in your front-end build.
A lot of devs achieve this for specific content in the design files, but when it comes to adding/editing content, or implementing dynamic content, the spacing can go all over the place because they didn’t truly understand what they were implementing.

Do your best to understand how the designer used whitespace and follow those concepts in your build. And yes, spend time on this. Once you think your work is done, go back and measure the spacing to ensure you have aligned and uniformly spaced everything as much as possible, then try out the code with lots of varying content to make sure it’s flexible.

If You Don’t Know What You’re Doing, Do Less

I’m not one of those people that thinks every project should use minimalist design, but if you’re not confident in your design chops and you need to add something, then less is more.

Less is more. If your designer did a good job to begin with, you should refrain from injecting your own design ideas.

Less is more. If your designer did a good job to begin with, you should refrain from injecting your own design ideas.
The designer took care of the main stuff; you only need to do minor fillers. If you’re not very good at design, then a good bet is to do as minimal amount as you can to make that element work. That way, you’re injecting less of your own design into the designer’s work, and affecting it as little as possible.

Let the designer’s work take center stage and let your work take the back seat.

Time Makes Fools Of Us All

I’ll tell you a secret about designers: 90 percent (or more) of what they actually put down on paper, or a Photoshop canvas, isn’t that great.

They discard far more than you ever see. It often takes many revisions and fiddling with a design to get it to the point where they’d even let the guy in the next cubicle see their work, never mind the actual client. You usually don’t go from a blank canvas to good design in one step; there’s a bunch iterations in between. People rarely make good work until they understand that and allow for it in their process.

If you think the design can be improved upon, consult your designer. It’s possible they already tried a similar approach and decided against it.

If you think the design can be improved upon, consult your designer. It’s possible they already tried a similar approach and decided against it.
So how do you implement this? One important method is taking time between versions. Work until it looks like something you like then put it away. Give it a few hours (leaving it overnight is even better), then open it up again and take a look. You’ll be amazed at how different it looks with fresh eyes. You’ll quickly pick out areas for improvement. They’ll be so clear you’ll wonder how you possibly missed them in the first place.

In fact, one of the better designers I’ve known takes this idea a lot further. He would start by making three different designs. Then, he’d wait at least 24 hours, look at them again and throw them all out and start from scratch on a fourth. Next, he’d allow a day between each iteration as it got better and better. Only when he opened it up one morning, and was totally happy, or at least, as close as a designer ever gets to totally happy, would he send it to the client. This was the process he used for every design he made, and it served him very well.

I don’t expect you to take it that far, but it does highlight how helpful time without “eyes on the design” can be. It’s an integral part of the design process and can make improvements in leaps and bounds.

Pixels Matter

You should do everything in your power to match the original design in your finished program, down to the last pixel.

Front-end developers should try to match the original design down to the last pixel.

Front-end developers should try to match the original design down to the last pixel.
In some areas you can’t be perfect. For example, your control over letter-spacing might not be quite as precise as that of the designer’s, and a CSS shadow might not exactly match a Photoshop one, but you should still attempt to get as close as possible. For many aspects of the design, you really can get pixel-perfect precision. Doing so can make a big difference in the end result. A pixel off here and there doesn’t seem like much, but it adds up and affects the overall aesthetic much more than you’d think. So keep an eye on it.

There are a number of [tools] that help you compare original designs to end results, or you can just take screenshots and paste them into the design file to compare each element as closely as possible. Just lay the screenshot over the design and make it semi-transparent so that you can see the differences. Then you know how much adjustment you have to make to get it spot on.

Get Feedback

It’s hard to gain an “eye for design.” It’s even harder to do it on your own. You should seek the input of othersto really see how you can make improvements.

I am not suggesting you grab your neighbor and ask for advice, I mean you should consult real designers and let them critique your work and offer suggestions.

Let designers critique your work. Put their criticism to good use and don’t antagonize them.

Let designers critique your work. Put their criticism to good use and don’t antagonize them.
It takes some bravery to do so, but in the end it is one of the most powerful things you can do to improve the project in the short-term, and to improve your skill level in the long run.

Even if all you have to fine tune is a simple checkmark, there are plenty of people willing to help you. Whether it’s a designer friend, or an online forum, seek out qualified people and get their feedback.

Build a long-lasting, productive relationship with your designers. It’s vital for useful feedback, quality, and execution.

Build a long-lasting, productive relationship with your designers. It’s vital for useful feedback, quality, and execution.
It may sound time consuming, and may cause friction between you and your designers, but in the big scheme of things, it’s worth it. Good front-end developers rely on valuable input from designers, even when it’s not something they like to hear.

Therefore, it’s vital to build and maintain a constructive relationship with your designers. You’re all in the same boat, so to get the best possible results you have to collaborate and communicate every step of the way. The investment in building bonds with your designers is well worth it, as it will help everyone do a better job and execute everything on time.

Conclusion

To summarize, here is a short list of design tips for front-end developers:

  • Design in a graphics program. Don’t design from code, not even the small stuff.
  • Match the design. Be conscious of the original design and don’t try to improve it, just match it.
  • Typography is huge. The time you spend making sure it’s right should reflect its importance.
  • Avoid tunnel vision. Make sure your additions stand out only as much as they should. They’re not more important just because you designed them.
  • Relationships and hierarchy: Understand how they work in the design so that you can implement them properly.
  • Whitespace and alignment are important. Make them accurate to the pixel and make them evenly throughout anything you add.
  • If you’re not confident in your skills, then make your additions as minimally styled as you can.
  • Take time between revisions. Come back later to see your design work with fresh eyes.
  • Pixel-perfect implementation is important wherever possible.
  • Be brave. Seek out experienced designers to critique your work.

Not every front-end developer is going to be a fantastic designer, but every front-end dev should at least becompetent in terms of design.

You need to understand enough about design concepts to identify what’s going on, and to properly apply the design to your end product. Sometimes, you can get away with blind copying if you’ve got a thorough designer (and if you’re detail oriented enough to truly copy it pixel for pixel).

However, in order to make large projects shine across many variations of content, you need some understanding of what’s going through the designer’s head. You don’t merely need to see what the design looks like, you need to know why it looks the way it does, and that way you can be mindful of technical and aesthetic limitations that will affect your job.

So, even as a front-end developer, part of your regular self-improvement should always include learning more about design.

The original article was written by  BRYAN GREZESZAK – FREELANCE SOFTWARE ENGINEER @ TOPTAL and can be read here.

To learn more about Toptal designer resources, check this out – https://www.toptal.com/designers/resources