Posted on July 27th, 2011 by Karan
Good web design uses visual elements to enhance ease-of-use (usability) first, while being pleasing to the eye and conveying an appropriate personality second. In many years of detailed metrics analysis and testing, we have seen that trendier or more visually creative designs, while exciting, often perform worse on key metrics such as conversion or bounce rate. That said, by using style elements to enhance usability, and not for their own sake, designers can create designs that are both exciting and usable.
This often comes down to details such as precise shading, shadows, color selection, subtle animations, and/or patterns and textures. Creative layouts and shapes can be used as well. A great example is the GEICO homepage, which uses subtle arrow shapes behind form fields to guide users to begin an auto rate quote. Apple and Google have also mastered the art of subtlety in their user interfaces.
Sometimes the same type of design element can help or hinder the effectiveness of a design depending on how it’s used. In a recent homepage redesign project we included an interactive feature that uses animations to flip through several different images – similar to what Get Satisfaction does on its homepage. Seeing this, our client asked if we could also use animations to slide marketing images across the screen to draw attention to them.
Not a good idea, we told them. The first type of animation provides useful visual information to the user about how to navigate through the image content so they can easily and intuitively access the desired information. Animating marketing images across the screen, however, would only serve to unnecessarily distract the user from their intended task.
There are many different elements that go into a design. The dichotomy between form and function, style and usability, can seem to be a daunting compromise. However, with some discernment and creativity, a design can be effective and usable as well as exciting and beautiful. A great designer is one who has the ability to bring these seemingly competing values together every time.
0 Comments
Posted on March 22nd, 2011 by Karan
In the past few years, mobile web browsing has exploded with the introduction of devices such as the iPhone. This growth has companies everywhere scrambling to come up with ways to adapt to their customers’ rapidly changing information needs and to leverage the plethora of new platforms. There are 3 main ways to create a presence on mobile devices -
- existing non-mobile optimized websites;
- websites or web applications specifically designed for mobile devices;
- and native applications that run directly on the devices.
It’s important to understand the benefits and drawbacks of each of these to determine the best strategy for your business.
Option 1: Existing non-mobile optimized websites
One of the key components to the recent smartphone revolution is the availability of desktop-class web browsers on mobile devices. Before the iPhone, mobile browsers were severely limited in their ability to display web content and websites designed for desktop browsers were more or less useless on these devices. This made it critical to design websites specifically for mobile phones. However, thanks to the large screens and clever interface gestures like flicking, dragging, and zooming on today’s smart phones, websites that are designed well for the desktop are perfectly usable on-the-go in most cases.
One of the best examples of this is the New York Times website, which Apple loves to show off in their commercials. This is one of the most highly trafficked and content heavy websites on the web, and yet the same design works well on desktops and mobile devices alike. If the main purpose of your website is to display content, it is unlikely that you need to do anything to cater to today’s mobile devices. Even desktop-centric designs for basic functions like search, account login, and signup are handled well by modern smart phones.
Option 2: Mobile optimized websites and web applications
On the other hand, if your website is more of a web application and heavily focused on functionality, making some design changes to make life easier for mobile users might be a good idea. A relevant example is the auto insurance quote system on GEICO.com. This application requires the user to input a very large amount of data to generate an insurance quote for their vehicle. Unlike content-based websites where the user can just zoom in on and scroll around the content they want to see, functionality-based websites require the user to understand all of the interface elements, input information, and make decisions, sometimes with sensitive personal information. It’s important that the user be able to see all of the form elements and labels clearly.
Using modern programming techniques, web designers can make mobile websites look and work like native applications on a mobile device. There is currently no way to make data entry tasks as easy on a mobile device as on a desktop, but if it’s possible to develop a very usable auto insurance quote system for mobile devices, it should be possible to design an interface for almost any data collection requirement.
One huge benefit to making a mobile-optimized website instead of a native application is that the same website will work on all mobile devices. Native applications have to be developed separately for different systems like iPhone and Android, and there can be significant development and maintenance costs involved. With existing platforms changing rapidly and new ones being introduced frequently, trying to offer services uniformly to all users via native apps can become a headache.
Option 3: Native Applications
That said, there are some use cases for which there is no option but to make a native application for a mobile device. This is the ultimate solution in terms of availability, functionality, and performance. Native applications have the ability to leverage the hardware of the device they run on, so you could use the phone’s microphone to record a sound, or the camera to take a photo, etc. This functionality is used well in USAA’s mobile application, which allows users to deposit funds into their account simply by photographing a check with their mobile phone and uploading it to USAA. This would not have been possible with a mobile website.
To take it further, native apps can use the capabilities of the hardware in ways that mobile sites cannot. Today’s mobile phones come with sophisticated graphics chips which can render dazzling video and interactive games. Especially with Adobe Flash player not working very well or at all on mobile devices, if you need to provide graphical interactivity or animation to users, native applications are the way to go.
Another area where native apps have an advantage is that they are stored and run directly on the phone, so they can be used when the device is not connected to the Internet. You should consider a native application when it’s critical that your users have access to your content or functionality even when their device may not have an active Internet connection.
Conclusion
As you can see, there are many ways to have a presence on popular mobile devices today. In our experience, many customers overestimate their need for mobile-specific offerings when a normal desktop version or mobile optimized version of their existing offerings would be the ideal choice. A good developer can help you make sense of your options and choose the one that gives not only the best return on investment, but also the best experience for your mobile users.
0 Comments
Posted on January 31st, 2011 by Karan
As business owners are sometimes surprised to learn, the costs and effort associated with developing online functionality like a web storefront or online property listing system are far more involved than creating a simple “brochure” website that only tells people about your business. It’s really a whole different ballgame. Unfortunately, unless you have some web programming background and are able to peek “under the hood” of a website, you might think that two sites that look and work the same on the outside are identical. So if two developers offer to develop the same functionality, shouldn’t you choose the one that can get it done faster and cheaper? Not necessarily.
When the first version of your website is complete, everything (hopefully) looks and works as desired and meets your business needs. But business needs are always changing, and the programming “under the hood” of your website becomes important when you need to update it to keep pace with your business. You may need to add a completely new type of product to your storefront, or a new feature like a shopping “wishlist” for your customers .
Good developers use several tools and techniques to keep website code well organized and easy to understand so these types of structural changes are easier to make. One popular and effective technique is to split up a website’s code into three independent areas: the visual presentation of text and graphics that appear on the screen; the website logic or “flow” that figures out which of those pages to load as a user navigates your site; and the data storage piece that stores and retrieves information like customer data or product details.
This is just one way to organize website code, but the advantage is that any of these areas can be changed without affecting the others. So if one day you decide you want to change the look and feel of your website, the developer doesn’t have to worry about the information flow or data storage. They can just change the look and feel. This is also makes updating your website safer because updates done to one area don’t affect the other areas. Sometimes quality coding costs a little more or takes more time up front, but the payoff comes when your business changes and your website needs to change with it.
As automobile manufacturers know, when developing a new car model, it’s important take some extra time in the planning stage so that parts like the chassis and engine can be put together in several different configurations depending on what’s required. Many of the same parts can be combined in different ways to make an SUV, a sedan, or even a sports coupe. Similarly, websites are made up of many pieces of code. If those pieces have been designed well, it’s much easier to reconfigure your website to keep up with your business as it changes. By working with a developer who takes this extra time on version 1.0, you can make sure you won’t have to start all over when it’s time for version 2.0.
0 Comments
Posted on January 30th, 2011 by John
Here are some recent work-related articles from the mainstream press that I enjoyed and you might too …
0 Comments
Posted on December 27th, 2010 by John
Two quotes that jumped out at me from the WSJ’s recent interview with Meetup founder Scott Heiferman. This on starting to charge …
We went from free to fee five years ago; it was a bet-the-company moment. Everyone said we were crazy. At first we lost 90% of our activity because every Meetup required the organizer to pay for it. It was a quality filter as much as a revenue model. Now we’re much bigger than when we were free and it’s a sustainable, profitable business.
And this advice for aspiring start-ups …
If you want to build something successful, build something that makes other people successful and powerful together. And ‘together’ might sound like a hippy-dippy word, but it’s the way things are going.
I was also interested to learn that Meetup was inspired by Robert Putnam’s “Bowling Alone.”
0 Comments
