6 Tips on Web Application Design

July 8, 2015
admin

Understanding Photoshop and design guidelines are two different things. This blog talks about some of the design guidelines that you should keep in mind when designing a web application.

Simplicity vs Exposure

You can either choose simplicity or bombard readers with information. Whatever, suits best with your business model. Now everyone is shouting for simplicity, cleanliness and ample white space, but you must know that information overload could be a good thing if you generate revenue from exposing your content.

For example, wikipedia is an advertisement free website. It relies on donation for operation. Once in a while you must have seen founder Jimmy Wales encouraging you to donate so that you can continue to enjoy an advertisement free wikipedia. There are thousands of articles in wikipedia. You come to wikipedia and search information. That is why wikipedia gives you a simple search page and gives you multiple language options to search with. Then you see the entire article in one simple page.

Wikipedia

Wikipedia

On the other hand, some business model relies on exposing you to information that you might not have looked up at all. Here is a glimpse of movies.yahoo.com.

Yahoo movies homepage design

Portion of Yahoo movies homepage design

This is true for any new website. Such website is often looked cramped with a lot of information. Such design is ideal with Yahoo’s business model – revenue from ads. Similar design trend can be found in online newspapers as well. Your web design must align with your business model.

Focusing on “True Value” for a Defined Audience

Make sure when designing a website, you put the values first. Customer does not care how good you are unless they see what value you bring to them. You can either show multiple values or focus on one true value. For example, we developed daytripfinder.co.uk for our client. The site focuses on four values right on the home page – saving money, time, email offers and free days out.

Daytripfinder Homepage

Daytripfinder homepage design

Client can also focus on one key value. For example, Instragram promotes one value – capture and share the world’s moments. Whatever you do make sure the key values are visible and understandable to your customers.

Instagram homepage (website) snapshot

Instagram homepage

Reduce the Number of Forms

Gone are the days when a website forced customers to fill up lengthy forms and open account. Now people are more social with Facebook, Twitter and Google. Please think about how much information you need from your customer. If you can quickly get it from social login, use it. People do not have patience now to try websites extensively as there are many websites and apps.

For example, when you are at airbnb.com, it provides you a simple form to log in.

Log in form of Airbnb

Log in form of Airbnb

This form is all you need to log in airbnb. Fluidui.com is one step ahead. They do not give option to separately sign in or signup. They give you one simple log in form. If you have an account you will will be able to log in. If you don’t have account, Fluidui will create an account sign you in.

Fluidui.com log in snapshot

Fluidui.com log in form

Use Infographics to Show State

Nobody has time this days. I keep saying that because this is what fundamentally driving electronic device and software design everywhere. Why do you think Apple, Google and Microsoft keep talking about simplicity and white space now a days. People want to come, quickly understand what they need to do and do it as soon as possible.

Infographic improves understandability of a service. Lets look at PayPal. It has recently revamped its website. When you log in to Paypal, you want to know two things how much balance you have and previous transactions. Look at how Paypal has organized the information with icon, font, spacing and color.

Snapshot of Paypal Dashboard

Snapshot of Paypal Dashboard

Such infographic layout helps user to quickly get the information she needs.

One Page with One Purpose

Dedicate each page for one purpose only. Do not introduce multiple idea in one page. If it is a log in page, put only log in or registration options on that page. If it is a product (or service) page, talk only about that particular product (or service) and its key features. For example, lets look at the design of Apple’s website.

Homepage of Apple's website

Homepage of Apple’s website

If you go to www.apple.com, it has divided its website based on its product and services – Store, Mac, iPad, iPhone, Watch and Music. Each page further gives more information relevant to that particular server. For example, the iPad page gives information on different versions of iPad.

You might be surprised why iPod, the music device that revolutionized US music industry is not there. I searched the web looking for yearly sales of iPod and found the following chart at Statista.

iPod sales over the years

iPod sales over the years

As you see, the future of iPods is not very shiny. The demand is falling each year people are moving towards music streaming service. Therefore instead of focusing on iPods, Apple has focused on its new music streaming service “Apple Music” and featured iPods within that page.

Assure and Re-assure

The idea is to put the most demanded product first so that customers can quickly get all the information. There are too many service providers with similar offerings. Customers often want support before, during and purchase. That’s why you will see customer oriented service provider putting customer support number or email in every page of the site.

Hostgator featuring support

Hostgator featuring support

Nascenia has a ecommerce platform www.goponjinish.com that sales underwear and lingerie. We have put “Happy to help” (a customer support service application from clickdesk) below. Everyday a number of customers knock there before making a purchase decision.

The design philosophy is that put customer first. Pay attention their need for information, graphics and color. Structure the design like majority of the customer would have wanted. Be consistent. Assure them with your success and support. Design is presentation of your service. It is the first impression of whats to come from you and first impression always matters.

I can give you more tips on website design such as making site responsive, putting action button strategically and so on. Lets not go there today. If you are hungry for more, check out our other writings from below.

Single Page Website: Tips, Pros and Cons

Responsive Web Design: Why and How

Revive Your Responsive Web Design with CSS Region

Parallax: A Contemporary Trend in Web Design

7 Tips on New Software Development for Business

6 Useful Tips for Software Development Companies on Pricing

Contributor: Mushtahir Aziz Rahman, Business Executive, Nascenia

6 Comments. Leave new

These 6 points I followed and got the best results out of it.

Reply

This talks about right strategy to suit your website in order to stay ahead of the competition by getting more visits.

Reply

This is perfect. I am looking for some tips that can help me design my website. Thanks for sharing!

Reply

This is some really good information about website development. I liked what you said about making sure that you lower a number of forms that you have to fill out. It does seem like a good thing to be aware of when you get a website made for you.

Reply

I like how you said that you can either choose simplicity or bombard readers with information on your website depending on your business. We are designing a website for our small bakery business and felt simplicity was best. I appreciate the tips on website and app design.

Reply

One of my cousins is interested in website and app design, so he’s been wanting to learn more about it. It was helpful when you mentioned that infographics are simple yet effective when displaying a service. These tips could really help my cousin create his own website app, so I’ll have to share this with him.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.