Designing web applications to create an app experience

Designing simple, elegant web applications is core to ensuring a consistent and clean user experience. I have spent a lot of time the last few weeks analyzing what helps provide an “app” aesthetic on the web, especially one that ensures the application feels more like a real app and not just a website. The reason this is important is because on the web there is no real definition of native or app–unlike mobile platforms such as iOS or Android.

Some key considerations to take into account are:

  • Logo & branding: Try to avoid full logos in the top left of the layout as this is something very native to traditional websites. If there is a need to incorporate branding you should use an icon or variation of the logo anchored into the nav bar.
  • Navigation bar: The header of the application should be anchored with a nicely designed (gradient, texture) bar that includes the branding and core navigation elements. The best way to represent the navigation elements is using buttons or icons, but try to avoid using icons that represent mobile motifs.
  • Footer bar: Having a nicely designed bar in the footer that is consistent with the nav bar really helps anchor the entire UI. It can make the application feel less like a web page that just ends after the main body.
  • Buttons: All buttons should have depth and strong interactions on click and mouseover. You should also use tooltips when necessary to give the user more information.
  • Font: Text should have shadows and depth, especially on navigation elements and buttons. I would also consider using custom fonts that you can get from Typekit or Google Web Fonts rather than standard Arial, Verdana, Tahoma, etc.
  • UI separation: Use strong ridgelines that have depth for separating buttons, elements, rows and assets. Spotify does a great job with this on their buttons and table headers on their grids.
  • Compact size: Design apps so that they are as small and as tight as possible, unless there is a real need for the window size to be large.
  • UI Interactivity: Making the UI customizable and interactive is really important. Adding things like animations, mouseover effects or being able to drag/drop UI elements is important.
  • Grids: All grids should have fixed headers when you scroll down, fixed column widths so the columns dont shift when data comes in and should be interactive when you mousover or click in a cell (such as changing the color of a row on mousover).
  • Flat Design: Flat design is also becoming a very big trend and one that I am following very closely. It can make very simple applications feel elegant and fluid. There is a really great article here that you should read if you want to learn more.

Below are some applications that do a great job incorporating the above elements are:

  1. Wunderlist
  2. HipChat
  3. Twitter
  4. Tweetdeck
  5. Spotify
  6. Asana
  7. Yammer
  8. Inbox2
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s