Designing Web Application Interfaces from a User Experience Standpoint

Web designers often overlook the true value of user experience. There is a lot to be said for how a user interacts with your page which can make or break your business and brand. All areas of design ultimately fall back to values of true user experience. You may ask yourself questions such as "how will my average visitor behave once they land on my site?"

Another approach is to step directly into the shoes of your site's visitors. Consider yourself just another web surfer jumping from page to page - how does your website stack up? Any web designer or developer will benefit greatly by taking steps towards applying deeper analytics into their web applications.

Designing Web Application Interfaces from a User Experience Standpoint

Why is User Experience So Important?

This question is asked a lot in the design community, and based on how recently this area has developed it's no surprise there's so much confusion. From an objective point of view most would agree in saying user experience is the most crucial aspect of a website's design. In truth a web application is nothing without visitors - just an idle page lost in the vastness of our world wide web.

User experience design stands out from the crowd as an area which has grown and developed over time. We're now entering an era where more people are online than ever before (and for more hours with faster connections, too). This shows how deeply our architecture of the web is shifting.

20 years ago having a web presence just meant having a website. Nobody was complaining if things weren't pretty and sparkly, in truth because nobody really cared. Modern web designers are not catering to the likes of their clientele so much, but have shifted towards designing for the user. This shouldn't come as a surprise since the goal of any website is to easily transmit information and communication.

Visitors Don't Stick Around for Very Long

Another interesting point to note is how quickly pages are browsed and passed in today's web. We're seeing a rise in social media outlets such as StumbleUpon and Reddit which place links at millions of visitors' fingertips. This has developed into an information overload which has severely shortened the attention span of most Internet users.

Visitors Don't Stick Around for Very Long
Image credit: laughingsquid

Given bounce rates on blog posts and videos holding mostly under 5 seconds you can start to see where a strong application interface comes into play. You need to make a good impression on your visitor the second they land on your page, because every second they spend afterwards is at their own discretion.

Concepts of a User-Friendly Design

There are so many ideas which go into digital designs catering to users it'd be impossible to implement them all into any single design. The key in user experience is to understand what makes your website different from the rest and what main features your visitors will be interested in.

Easy Navigation through Pages

Seems obvious at first but it's surprising how many websites make things difficult to even find an "about us" page. You'll want to compose page elements as simple as possible for your visitors (why make things difficult?). Generally when a visitor lands on your web application's home screen you'll want to reel them in further through some type of action.

Implement the mindset of being the user. What information would you want to know about a new web application? Where would you generally look for it? Big glossy buttons up and down the page aren't necessary but simple placement of links in areas above the fold will help.

Easy Navigation through Pages
Image credit: lookatlao

You may also consider running a video demonstration and explanation of your app since most people can understand concepts easier through audio/video. The only downside here is with traffic from mobile browsers which don't support video. In this case you'll want to leave alternative directions for your visitors to follow, such as an FAQ page.

Send Inviting Vibes and Tonality

This concept is more difficult to grasp but comes easier through time and practice. Understanding the energies your website puts out to any given visitor is a key component in user experience design. It goes beyond just looking at a page and delves into feeling how your visitors will feel.

Using vibrant, attractive colors is a simple way to lure wandering eyes. There are many articles discussing color theory which will provide useful knowledge when creating a tone.

A simple explanation would be to apply cooler colors in regions where visitors should feel relaxed, at ease, possibly reading web copy or signup forms. Richer warm colors should be applied to areas which require attention and possibly action. RSS subscription boxes, landing pages, and many other examples fit well here.

Send Inviting Vibes and Tonality
Image credit: wiccked

Ultimately it comes down to rolling up your sleeves and diving head-first into page design. A little elbow grease goes a long way in working towards a usable, sustainable web application. Don't get discouraged if it takes some time to get things just right. Nobody is perfect at design and mistakes are just part of the process.

Step Back to View the Big Picture

It's often easy to get caught up in the trivial smaller elements of a design to the point where you can't see the entire structure anymore. This is a powerful skill to have but always in moderation.

As an example it's important to understand what it means to focus in on how big to make your input fields. But it's also just as important to de-focus and collect the bigger picture. These two perspectives used in coordination can greatly enhance your capacity for unique and structured digital design.

Step Back to View the Big Picture
Image credit: hiroshi_a

Drafting a wireframe before you enter into the design process can also benefit immensely. Knowing you have a simple structure set up gives you something to fall back on if you're ever stuck in the creative process. It can also help with envisioning the final product since you can piece together generic block elements into areas on the page (ex. navigation, logo, sidebar categories).

List Out your Block Elements

This is a great step to also map out key areas your page may need. For example here's a small list of page elements you could create before designing a new blog theme:

  • Logo & Brand
  • Main Heading Navigation
  • Search Box
  • Feed Subscription Box
  • Categories/Archives
  • Link to Twitter in Sidebar
  • "About the Author" box

From here you can try placing these different elements into your page's structure. Design from the eyes of your average user. What do they want to see? Where is the best placement for each of these items to catch your reader's eye? Are all of these elements essential or can some be removed?

Don't expect to get any perfect answers at this stage. The best way to approach this is to go with your initial gut feeling and launch the design. If you notice poor user feedback or some areas on the page are buggy and awkward it's simple to change things up.

Structure your Design for Simplicity and Speed

Verizon FiOS has re-defined hi-speed Internet access with fiber optic cables. It has rolled out in many areas worldwide and provides blazing fast connection. This has caused more impatience in the casual web surfer, so making them wait too long is a sure sign for disaster.

Structure your Design for Simplicity and Speed
Image credit: hide99

This is another great exercise where you should place yourself in the shoes of any generic visitor. Consider how quickly each page element loads and what your eyes are drawn to first. Are there areas in your code which can be optimized for even quicker page loads?

Resampling images to hold less data is another option. This is especially true if you aren't placing content which requires high-quality JPG compression.

Relieve Confusing Areas for More Room to Breathe

Cluttered landing or signup pages can kill an entire web application, even if the idea is fantastic! Some designers criticize white space and claim it's not an advantageous part of any design. Visitors loading up your page for the first time don't want to see cluttered paragraphs and headings mushed together. In fact they probably won't even read any of it.

The argument for additional white space comes with its drawbacks as well. If you apply too much spaced area and simplify things to the point where your visitors are confused about what to do, they're bound to leave pretty quickly. It's the balance between these two competing content properties which will leave you in perfect harmony from a user experience standpoint.

Relieve Confusing Areas for More Room to Breathe
Image credit: bananasontoast

These tips can be applied to many areas of design aside from landing pages for web apps. For example, consider a sample blog post found through Digg or a similar medium. The visitor has no idea what to expect from your site - all they know is the title of your article and your site URL. If the page loads up and it's full of banners, images, links, and your flowing article content how will they be able to process all this?

When in doubt simplicity is the gentlest road to walk along. After all, it's much easier to place additional features into clear areas rather than remove elements from a cluttered page. You may even find your visitors enjoy simplicity.

Blog articles provide a much different setting than reading a book or newspaper. Reducing the amount of distractions should ease your readers into sticking around longer.

Gathering Comprehensive User Feedback

Aside from stepping into the shoes of your visitors there's really only one better way to acquire data - directly from your visitors themselves. Who knows what parts of your design need fixing better than those using the interface every day?

There are countless in-depth articles discussing popular ways for acquiring user feedback so I won't go into all of them. One of the most popular currently is A/B Testing which derives from applying small changes to a page and measuring the user response.

A good example: imagine a sample web application where you're looking to find the best way to gain more registered users. You could have a large sign-up button in the center of your page with 2 different background deviations - a rich blue gradient vs a light green gradient. You would then display one version of the page to 50% of your traffic and the other version to the rest, measure the results after x amount of days and reach a sound conclusion.

Gathering Comprehensive User Feedback
Image credit: mellyoggs

This method is a passive process which doesn't directly involve the user's thoughts or feedback. In fact most of the time your visitors won't even know they're being fed a test page! This is why A/B testing, or "split testing", can provide such accurate results.

Direct Input from your Visitors

On the other hand it's not frowned upon to ask your visitors up front what changes they'd like to see. Many times a designer won't be able to look past his/her own ideas and need another outlet to garner appreciation. What better outlet to utilize than your visitors themselves?

Not everybody will participate in giving feedback and not all feedback will be useful. But there are always a few gems in every bunch to help warp your perception and create some fantastic new ideas. If you don't particularly enjoy amassing ideas from strangers through the web it may be more comfortable to show a mockup to family or friends first.

You can never have too many opinions on a design, though you have to take into account some opinions will be more credible than others. Take advice with a grain of salt and don't stress the little things. We're only talking about digital interfaces, after all.

These are just a few points to note when starting a webpage design. UX is imperative when it comes to new-age web development. Always be humble in your design work. Understand that although you may have years of practice in the field there's no simple equation for developing the perfect user interface.

More Resources

There are hundreds of web design blogs and communities sharing resources around the web. You can find mockup tools, Photoshop templates, buttons, patterns, practically anything you'd need! And when it comes to user interfaces, web design is not left in the dust.

Below I have compiled a list of useful tools for improving web interfaces and user experience. These handful of websites and applications can be very useful to development teams looking to build for the WWW or mobile web.

Adobe Kuler
Adobe Kuler allows you to share resources and pick out color matchups for your mockups. These color themes can be custom-made or chosen from a handful of preselected themes. The community of users are able to build their own and submit them regularly.

Adobe Kuler

iPhone Mockup
The great thing about iPhone Mockup is its service is built within the cloud. So the whole application can run from within your browser. There are two main building options: illustration for neat lines and edges, or pencil for rough sketch-drawn art. This is perfect for demonstrating your works to a client wondering what you are capable of!

iPhone Mockup

Pencil Project
Pencil Project is a free open source Firefox add-on. It allows you to build GUI prototypes for nearly anything. It features built-in stencils for the most common features of mobile and web design. You can also export your creations as PNG images or directly into HTML. It's perfect for the focused web developer.

Mockup Simulator Pencil

Axure
Axure is a desktop app which allows you to prototype your designs. It provides so many preloaded assets for buttons and forms, it's an incredibly simple process for designers and developers. It's built for both Windows and Mac OS X which is perfect for everybody!

Axure Prototyping App

Mockingbird
Out of all the wireframing toolkits and web applications, Mockingbird truly holds my #1 spot. It provides so many features and allows you to include a vast amount of tools and in-browser menus. Granted you can try it for free, there are pro plans ranging from $9/mo to $85/mo. Check out their signup page for more details.

Mockingbird Web App

Mockflow
Yet another fantastic in-browser prototyping tool, Mockflow actually gives you a full account and portfolio for your mockups. You can save drafts and pick up at a later date, even switch computers! Their application can connect directly into your Google account, so it's very simple to share and build projects on the go. Additionally it's possible to build "teams" where you can collaborate on wireframes via the Internet.

Mockflow Youtube Clone

Cacoo
Cacoo could be considered runner up for #2 best online wireframing toolkit. Account signup is free and can even connect through Google, Yahoo!, and Facebook. Their editor is very unique, featuring tabs and a whole load of icons for editing options. Also their assets panel is huge and features even unique icons for logos and page effects. You really have to just give it a try and see what it's all about.

Cacoo iPhone Mockups

Conclusion

If you're like me chances are good you'll want to read up on other areas in user experience design. There are countless resources on the topic and many design experts from around the globe are always talking about UX in forums, through Twitter, and everywhere else designers hang out.

Experience in design is a deep topic of study and with so much information available for free it's a relatively simple process to iterate rich, powerful designs which genuinely please your users.