Design basics for web applications -Part1

1. Load Quickly

47% of consumers expect a web page to load in 2 seconds or less.

Users are slightly easier on web apps, but loading time is still important. Displaying a part of the content or a loading bar is a great way to keep users on the page.

Sounddrown displays their logo with a simple animation while the app loads.

2. Keep Consistent

One of the top principles of good UX is keeping the interface consistent throughout the entire app. A user has to already learn how to use it, so why not make it similar from screen to screen?

Wherever you are, you always know where to look to find left-side links in Gmail.

3. Design For No Data

To make mockups look nicer and more realistic (even if it’s just Lorem Ipsum), we design apps with content. But that’s not what fist-time users will see. In places where there should be a list of files or friends there will be blank space(sorry, I had to). We can either guide users through creating some content or display helpful and unobtrusive tips.

A nice illustration and a tip help new users get accustomed with Dropbox.

4. Where Am I?

Don’t let your users get lost in your app. Using elements like breadcrumbs or form steps will help eliminate unnecessary clicks and show hierarchy.

In simpler apps, Simply marking the current page in the navigation will do the trick.

5. Where did that come from?

Instead of just displaying data, show transition. This way, you’ll avoid surprising users with a different interface.

6. Focus On Target Users

You should always design for your audience. If the majority of your users know Git, there’s really no point in also tailoring the experience to non-techies. At worst, you’ll clutter the interface for everyone.

Github’s clean interface isn’t rich in graphics and full of explanatory text.

7. Help Users Decide

Looking at a new interface for the first time can be overwhelming. Help new users follow through with the task they’re most likely to do by adding emphasis to the “next step”. Should they create a new project? Install software?

You can even start with a lean UI and only add features as the user progresses.

It’s hard to say no to Pinterest’s obvious “next step”.

8. Unobtrusive Help

Your app’s interface should be as intuitive as possible. However, users will sometimes need a gentle push into the right direction. It’s important to let them learn on their own and only offer help when it’s needed.

9. Provide Feedback

There’s nothing worse than buttons that do nothing. To keep users from clicking the same button five times just because the site is loading, provide a cue to let them know what’s going on. This can be textual, using words like “Loading …”, “Sending …”, or “Please wait”, or using a loading bar.

Beautiful button animation combined with the spinning loader in the Headspace web app lets you know your request went through.

10. Plan Before Developing

Take some time to break down your app into a wireframe before starting to code. Making changes later is far from easy. UX should be a priority before everything else starts.

Start with user flow. Go step-by-step from nothing to the result and skip all the “nice to have” features.

Mailchimp has a nice user flow that guides you through creating an email campaign with a breeze.

11. Less is Better

Feature requests will never stop. Your app will never be perfect. But it can be useful. And the only way to make sure of that is by limiting the number of features.

I know, it sounds counter-intuitive to disregard your customers’ and your own ideas for improvements — but it’s necessary. Every button you add is another chance for a new user to get confused and leave. Ask yourself: If this app only did one thing, what would it be?

TeuxDeux is an app that basically only does one thing — saves tasks for different days.

12. Group Related Elements

Users should (in most cases) be able to guess where to find a control or information. A great way to make sure of that is to group related objects together. For example, features like log out, settings, profile, switch account belong together, so they shouldn’t be scattered around. We can connect them with colour, styles (same size font), or put them in the same box.

13. Don’t Reinvent Patterns

Use patterns you see in popular apps to help users learn your interface. These patterns can be

  • colours (using red for errors)
  • icons (envelope is a recognised symbol for messages)
  • placing (“forward” button is always on the right-hand side)

When reporting a post, Facebook displays the “Continue” button placed on the right-hand side and makes it more prominent than the secondary option “Back”.

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

14. First Know Your Users

You’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience.

15. Design Process

i) Sketching

ii)Wireframing

ii)Prototyping

iii)Testing: Prototype are a waste if they cant be tested.

--

--

--

I write about UX and design as I learn in my journey of building digital products

Recommended from Medium

An Examination of Sustainable Product Design and Development

UI/UX Case Study: Designing Life Insurance Feature “Last Wish”

Marta Zewdu + Green Upward: A Visual Collaboration

How to Create a Mobile App Tutorial That Boosts User Engagement and Retention

SevenTablets explores How to Create a Mobile App Tutorial That Boosts User Engagement and Retention

What do a Doctor and a Designer have in Common?

Making Collaboration Rad

Here’s a tour of Volvo’s new XC40 mini crossover.

Designing Xpense : Financial Manager as an App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ravi Kumar.

Ravi Kumar.

Building nextgen real estate platform at PriceHubble & podcaster at productlessons.com. I blog about products, business around products, and growth strategies.

More from Medium

IA: What is it? And what led to the evolution of this subject?

How Google lured me into buying Play Store Balance that I did not need and can not use

The first week at Misk UX Design Bootcamp and introducing “Kidztivity”!

Duolingo UX Breakdown: 1+ Year of Daily Use