top of page
10 essential UI (user-interface) design tips
1. Know your users Above all else, you have to know who your users are — inside and out. That means knowing all the demographic data your analytics app(s) can pull, yes. But more importantly, it means knowing what they need, and what stands in the way of them achieving their goals. Getting to that level of empathy requires more than careful analysis of stats. It requires getting to know the people who use your website. It means speaking with them face to face, watching them use your product (and maybe others), and asking them questions that go deeper than, “What do you think of this design?” What are their goals? What stands in the way of them achieving those goals? How can a website help them overcome or work around those challenges? Don’t stop at knowing what your users want. Dig deeper and find out what they need. After all, desires are just outgrowths of needs. If you can address a user’s deep-seated need, you’ll address their wants while also fulfilling more fundamental requirements. The insights you’ll uncover from analyzing data and speaking with users will inform every decision you make, from how people use your interface to what types of content you’ll highlight within that interface. 2. Define how people use your interface Before you design your interface, you need to define how people will use it. With the increasing prevalence of touch-based devices, it’s a more pivotal concern than you might think. Just look at Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe. People use websites and apps in two ways: directly (by interacting with the interface elements of the product) and indirectly (by interacting with ui elements external to the product). Examples of direct interactions Tapping a button Swiping a card Dragging and dropping an item with a fingertip Examples of indirect interactions Pointing and clicking with a mouse Using key commands/shortcuts Typing into a form field Drawing on a Wacom tablet Who your users are and what devices they use should deeply inform your decisions here. If you’re designing for seniors or others with limited manual dexterity, you wouldn’t want to lean on swiping. If you’re designing for writers or coders, who primarily interact with apps via the keyboard, you’ll want to support all the common keyboard shortcuts to minimize time working with the mouse. 3. Set expectations Many interactions with a site or app have consequences: clicking a button can mean spending money, erasing a website, or making a disparaging comment about grandma’s birthday cake. And any time there are consequences, there’s also anxiety. So be sure to let users know what will happen after they click that button before they do it. You can do this through design and/or copy. Setting expectations with design Highlighting the button that corresponds to the desired action Using a widely understood symbol (such as a trash can for a delete button, a plus sign to add something, or a magnifying glass for search) in combination with copy Picking a color with a relevant meaning (green for a “go” button, red for “stop”) Setting expectations with copy Writing clear button copy Providing directional/encouraging copy in empty states Delivering warnings and asking for confirmation For actions with irreversible consequences, like permanently deleting something, it makes sense to ask people if they’re sure. 4. Anticipate mistakes > To err is human; to forgive, divine. Alexander Pope, “An Essay on Criticism” People make mistakes, but they shouldn’t (always) have to suffer the consequences. There are two ways to help lessen the impact of human error: Prevent mistakes before they happen Provide ways to fix them after they happen You see a lot of mistake-prevention techniques in ecommerce and form design. Buttons remain inactive until you fill out all fields. Forms detect that an email address hasn’t been entered properly. Pop-ups ask you if you really want to abandon your shopping cart (yes, I do, Amazon — no matter how much it may scar the poor thing). Anticipating mistakes is often less frustrating than trying to fix them after the fact. That’s because they occurbefore the satisfying sense of completion that comes with clicking the “Next” or “Submit” button can set in. That said, sometimes you just have to let accidents happen. That’s when detailed error messages really come into their own. When you’re writing error messages, make sure they do two things: Explain the problem. E.g., “You said you were born on Mars, which humans haven’t colonized. Yet.” Explain how to fix it. E.g., “Please enter a birthplace here on Earth.” Note that you can take a page from that same book for non-error situations. For instance, if I delete something, but it’s possible to restore it, let me know that with a line of copy like “You can always restore deleted items by going to your Trash and clicking Restore.” The principle of anticipating user error is called the poka-yoke principle. Poka-yoke is a Japanese term that translates to “mistake-proofing.” 5. Give feedback — fast In the real world, the environment gives us feedback. We speak, and others respond (usually). We scratch a cat, and it purrs or hisses (depending on its moodiness and how much we suck at cat scratching). All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page, restart the laptop, or just fling it out the nearest available window. So give me that loading animation. Make that button pop and snap back when I tap it — but not too much. And give me a virtual high-five when I do something you and I agree is awesome. (Thanks, MailChimp.) Just make sure it all happens fast. Usability.gov defines any delay over 1 second as an interruption. Over 10 seconds, a disruption. And the latter’s generous: for about half the U.S. population, 3 seconds is enough to cause a bounce. If a page will load in under 5 seconds, don’t display a progress bar, as it’ll actually make the loading time seem longer. Instead, use a visualization that doesn’t imply progress, like Mac’s infamous “pinwheel of death.” But not that. If you do use progress bars on your site, consider trying some visual tricks to make the load seem faster. 6. Think carefully about element placement and size Fitts’ Law, a fundamental principle of human-computer interaction (HCI), states that: The time to acquire a target is a function of the distance to and size of the target. In other words: the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This obviously has all kinds of implications for interaction and user interface design techniques, but three of the most important are: Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is especially important with typography, menus, and other link lists, as insufficient space will leave people clicking the wrong links again and again. Make the buttons for the most common actions larger and more prominent. Place navigation (and other common interactive visual elements, like search bars) on the edges or corners of the screen. This last might seem counterintuitive, but it works because it lessens the need for accuracy: a user doesn’t need to worry about overshooting their click target. While you’re thinking about element placing and size, always keep your interaction model in mind. If your site requires horizontal scrolling rather than vertical scrolling, you’ll need to consider where and how to cue users to this unusual interaction type. 7. Don’t ignore standards Being highly creative types, designers tend to love to reinvent things — but it’s not always the best idea. Why? Because a revamped version of a familiar interaction or interface adds “cognitive load”: it makes people think again about a process they’ve already learned. Obviously, you can reinvent the wheel all you want — but only if it actually improves the design. This rule of thumb explains why Google Docs’ menu bar features almost all the same options as Microsoft Word’s before Vista: Up till fall 2013, the archive button was at the top left of the screen — right where Android design specs said the “Up” button should be. Pocket wanted to focus people on the reading experience, and not duplicate an existing hardware control, but the inconsistent placement caused new users to accidentally close and archive the article they were reading, rather than simply returning to their reading list as expected. That tiny change “increased the likelihood [new users] would continue using Pocket from this point onwards by 23%.” 8. Make your interfaces easy to learn When it comes to simplicity, people often cite a paper by Harvard psychologist George Miller called, “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information.” The article suggests that people can only hold 5 to 9 things in their short term memory with any reliability. Miller himself called this a coincidence, but that doesn’t seem to hold anyone back from citing him. That said, it’s only logical that the simpler something is, the easier it is to remember in the short term. So, whenever possible, limit the number of things a person needs to remember to use your interface efficiently and effectively. You can facilitate this by chunking information, i.e., breaking it into small, digestible chunks. This idea dovetails with Tesler’s Law of Conservation of Complexity, which states that UI designers should make their interfaces as simple as possible. That can mean masking the complexity of an application behind a simplified interface whenever possible. A popular example of a product failing to follow this law is Microsoft Word. Most people only do a few things in Word — e.g., typing — while others can use it to do all sorts of powerful things. But around the world, everybody opens the same version of Word, with the same UI, leaving your average Joe — who’s not a power user — overwhelmed by the variety of options they’ll probably never use. This led to a concept called progressive disclosure, where advanced features are tucked away on secondary interfaces. You’ll often see this on websites’ home pages, where short chunks of copy introduce a product or feature, then link off to a page where users can learn more. (This also happens to be a best practice for mobile design, where robust navigation is always a challenge.) Pro tip: Avoid using “learn more” and similarly non-specific text in links and buttons. Why? Because it doesn’t tell users what they’ll “learn more” about. Often, people simply scan a page looking for a link that takes them where they want to go, and “learn more,” repeated 15 times, doesn’t help. This is especially true for users of screen readers. 9. Make decision-making simple Too much of the web screams at us: “Banners” suddenly expand to become full-screen ads. Modals pop up, imploring us to subscribe to blogs we haven’t had a chance to, you know, read yet. Video interstitials stop us in our tracks, forcing us to watch precious seconds tick oh-so-slowly by. And don’t even get me started on the widgets, flyouts, tooltips … Sometimes I long for a calmer web — and Hicks’ Law gives us all a reason to build one. The idea’s as simple as its end result: the more ui options you present a user, the harder it becomes for them to make a decision. This impacts almost everything we build: Overall layouts Navigation menus Pricing pages Blog indexes Content feeds The list goes on. But the upshot is: the simpler we make our designs, the faster and easier it is for users to make the decisions we want them to make. That’s exactly why landing pages and non-newsletter emails should only have one call to action. Pro tip: Sometimes, you actually do want users to slow down and consider their options. That’s why the tiled designs of Pinterest, Dribbble, and many blogs actually work well. After all, the more options you have to decide between, the more likely it is you’ll find one that works for you. 10. Listen to the data While we all might wish our designs were evaluated purely on their artistic merit, the reality is that optimizing your design to meet its objective is just as important. While user research and testing can be incredibly helpful in guiding your design decisions toward fulfillment of your site’s goal, data gathered after launch remains invaluable. So set up analytics for your site, and analyze them regularly. There’s a bunch of different analytics tools out there, but I recommend Google Analytics and/or Mixpanel, depending on the project type. Mixpanel focuses on events, so it collects data based on actions a visitor takes on your site, while Google Analytics is more behavioral, giving you session times, traffic sources, etc. While both tools can provide both forms of data, they really shine in their focus areas, so choose whichever best fits your needs. Note: both of these tools are free for up to a certain amount of data points. Webflow and similar platforms usually make analytics setup easy through a simple API key exchange.
30 Nov 2023
17 useful tools for UI/UX designers
UI and UX are two distinct facets of web design, yet they work hand-in-hand. While UI focuses on your design interface and how a user interacts with it, UX emphasizes a users experience as they use your product or service. UI design tools give designers what they need to design accurate hi-fi wireframes, mockups, and prototypes and render minimally viable products. They represent the nuts and bolts of a design, communicating its functionality. UX design tools focus on the user and how they’ll experience the content. These tools can help structure the information architecture, as well as how someone will flow through the experience. Since this is more conceptual, UX tools are about helping a designer paint the broader picture of how content and organization will affect experience. We’re going to take a look at some UI and UX tools that you may find handy for your design process. Some of these tools have features that work in both UX or UI, but for the sake of your own user experience, we’ve divided the list into two categories 1. Sketch If you have any UI design experience, you’ve heard of Sketch . And there are quite a few reasons why it’s one of the design tools that’s so revered. Being able to make universal changes — whether it’s through their library of symbols, layer styles, or text styles, or its smooth resizing and alignment features — saves designers time to deliver consistent prototypes. It takes out what’s tedious and lets designers jump in and create. And with a multitude of third-party plugins that integrate without problems, there’s no shortage of tools out there that can be used with Sketch. Popular read: From Sketch to Webflow: how to turn mockups into live websites 2. InVision Studio With a full suite of applications, InVision gives designers all of the UI design tools they need to create fully realized and functional prototypes with dynamic elements and animations. Along with these easy-to-use UI design tools, they also make communication easy — with collaboration features that let developers share their work as they design it, receive feedback, and make documented changes at each step. Another useful aspect of InVision is the digital whiteboard that allows team members to get their ideas out there, interact, and get that all important sign-off before moving forward. 3. Axure Axure functions in prototyping and keeping track of the workflow. It features a smooth interface to document as you go. High fidelity drives this app, resulting in prototypes full of details. Axure offers many of the other features of popular prototyping and UI design tools. It allows for testing of functionality and puts everything together for an easy developer handoff. This, combined with an emphasis on communication, ensures that everyone on a project is kept up-to-date with progress and changes as they happen in real time, making Axure a solid choice for UI design. 4. Craft Craft , a plugin from InVision, works right alongside what you might be doing in Photoshop or Sketch, with a sync function that updates what you’re working on. Along with this time-saving feature, Craft offers everything you need for prototyping and collaboration. Changes in styling, edits, and other tweaks are updated across the board so that everyone is referring to and working from the same version of a project. Craft sets itself apart from other UI design tools with its placeholder content. You get access to both Getty and iStock photos, letting you fill your layout with better visuals. And if there’s data in your layout, you can use your own or bring it in from other sources. Not many UI design tools let you fill your mockups with more meaningful content. This special feature of Craft gives your mockups a more accurate representation of what a final design might look like. Related reads: The best Photoshop alternatives (free + paid) 5. Proto.io In their own words, Proto.io says using their UI design software results in “Prototypes that feel real.” And Proto.io delivers on this, giving you what you need to create, organize, integrate, and test accurate mockups. It also smooths out the collaboration process, fostering communication between team members through comments and video feedback, as well as integrating with some of the more well-known testing products, like Lookback, Userlytics, and Validately. 6. Adobe XD It’s hard to knock Adobe off of their status as royalty in design software — their kingdom of design products reigns in the creative cloud. Adobe XD offers vector-based user interface tools for creating prototypes and mockups with an interface that’s familiar to anyone who has used other Adobe products. This, along with real-time collaboration, makes it a go-to for many UI designers. Adobe XD has many sophisticated tools for UI designers, but it is also stocked with what designers need to whip up interactions and other dynamic elements that can be integrated into prototypes or mockups. It’s one of the rare design platforms that can combine different disciplines together, without anything lacking. Popular read: From Adobe XD to Webflow: how to turn your prototypes into live websites 7. Marvel Whether you’ve been a UI designer for a while or if you’re just stepping into the role, Marvel’s design platform makes things easy. With the ability to create both low fidelity and hi-fi wireframes, interactive prototypes, and do user testing, it gives a UI designer everything they need — all wrapped into an intuitive interface. Marvel also has a feature called Handoff that gives developers all the HTML code and CSS styles they need to start building. 8. Figma Figma lets designers build dynamic prototypes and mockups, test them for usability, and sync up all of the progress. Figma allows for a collaborative environment where multiple people can work on a project at the same time, much like Google Docs — letting you see who has it open for real-time collaboration. You’ll see who’s working and what they’re doing. It’s also browser-based, making it accessible to everyone in an instant. And as an added bonus, it’s free for individual use so you can check it out and get familiar with how it works. Popular read: From Figma to Webflow: turning your static designs into interactive websites 9. Framer X Framer X has evolved from its early days as a code-only prototyping application. Today it offers a host of UI design tools for building functional prototypes and testing for usability. Its ability to work with React makes it ideal for UI designers who like to stay on top of the newest web design innovations. Framer X also offers a variety of plugins in their store, giving UI designers features such as UI kits for integrating social media channels like Snapchat and Twitter, players for embedding a variety of media, grids, and other useful components that can be easily integrated. It’s a great interface design tool with a fairly east learning curve. 10. Origami Studio With a Facebook pedigree (it was built by and for Facebook designers), Origami Studio packs in more complexity than something like InVison or Sketch — which are a bit easier for beginners in design . For those who need a more advanced prototyping tool as a part of their design system, Origami Studio has a lot to offer. This platform has the tools you need to build complete prototypes that are powered by a sophisticated patch editor, giving designers the opportunity to integrate advanced functionality. Prototypes end up looking and working like a real app or webpage. Origami Studio also integrates well with Sketch. If you’re working in parallel with Sketch, it lets you brings in layers and copy and paste them directly without any hang-ups. 11. Webflow Okay, the self promotion you’ve been waiting for — but stick with us here. You want to speed up the design process, right? Webflow gives you the power to design without knowing HTML or CSS. With drag and drop functionality and an intuitive interface, Webflow gives you the creative freedom to build whatever you imagine. Using Webflow for building a prototype gives you an actual website, and generates accurate HTML and CSS code or JavaScript when implementing micro-interactions. This saves time. Instead of taking what’s been drafted in a prototype and building a design from it, you already have what you need to give to a developer. You can also use a template if you don’t want to start from scratch. Even Ryan Miyoshi, lead designer at Webflow, decided to ditch prototyping tools and start designing and building straight in Webflow. Unleash your creativity on the web Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow. 12. FlowMapp When developing a user experience strategy, designers need to pay attention to structure, flow, and corresponding sitemaps, which are all at the foundation of UX design. Where so many tools out there try to combine UI and UX together into one platform, FlowMapp dedicates itself to the discipline of UX design. Building user flows and constructing visual sitemaps are indispensable for UX, and these are the pillars of FlowMapp’s UX design app. 13. Balsamiq With a user friendly interface, Balsamiq makes it easy to create low fidelity wireframes . Even people with zero experience in wireframing could jump in and put together ones that look good. Balsamiq encompasses both UI and UX, but really stands out with its low fidelity wireframes. Balsamiq’s nod to the physicality of whiteboarding makes the tool accessible to anyone, no matter their skill level. 14. VisualSitemaps VisualSitemaps specializes in generating, you guessed it, visual sitemaps. It’s nice to have a tool designed specifically for this. This tool has complete automation, the capacity to go through password-protected websites that haven’t gone live yet, and the ability to import into Sketch. VisualSitemaps takes the process of creating visual sitemaps and supercharges it for UX designers, developers, and anyone else who needs to be involved with the process of creating them. 15. Treejack The visual components of a design are important, but without great content, it’s nothing but an empty vessel. Having quality content isn’t enough — it needs to be arranged in a flow and structure that will maximize its accessibility. This is where information architecture comes in. Treejack specializes in information architecture. It lets you test the tree structure of a website with real users. It then generates the results that show a user’s path and navigation through the content, giving you valuable insights that you can use to edit and tweak the content organization. 16 Wireframe.cc Wireframes don’t have to be complicated, and keeping them simple lets them communicate in a straightforward way how a design needs to be structured. Wireframe.cc keeps their wireframing tools focused on minimalism. Intentionally limiting the color palette and using simple rectangular elements — along with an uncomplicated interface — lets UX designers construct a low fidelity wireframe in a snap. There’s even an in-browser demo you can use to see how it works. 17. Optimal Workshop As far as a UX design platform goes, Optimal Workshop has all you need to analyze usability, figure out information architecture, and test and evaluate a design. Optimal Workshop distinguishes itself in giving insights and providing in-depth data about users and how they interact with a design. This carefully curated UX platform offers tree testing with Treejack, which we just talked about, first-click testing with Chalkmark, online surveys, and Reframer for doing qualitative research. Having these bundled together makes for a package of tools that any UX designer would find useful.
4 Aug 2022
bottom of page