Got a moment to see if your site passes this quick usability checklist? These are some common usability mistakes we encounter on the web while reviewing sites.
Wapple.net (http://www.wapple.net) offers a mobile publishing platform for new and existing businesses. Follow along with us as we take their flagship product, Wapple Canvas, for a spin to see which elements of their interface work and which ones need retooling.
Wapple.net is, initially, an easy sell. As someone who hasn’t specifically targeted a website or application towards a mobile market, Wapple makes the process of doing so look simple and even fun. After the (notable) page load, the carousel used up top immediately draws my attention. The color scheme is bright and energetic. Seeing the Watchmen graphic and many images of phones instantly gives me two impressions: this site relates to a culture with which I identify and has content familiar to me. While I later learn that I won’t be seeing the Watchmen on my phone via this site, I still trust the wapple.net because the people behind The Watchmen did.
The first thing I look for as I open Wapple is a tagline. Even though the title of the website speaks to what Wapple is all about, it is commonly overlooked by users. A tagline reiterating what exactly this site is about in one to two sentences would be a great addition.
As I look over the home page it is not clear as to where I should go next. I am drawn to the content slider in the middle top of the page and browse what is offered here. If a viewer is not drawn to one of these slides they may be off to the next site. I decide to press on and go deeper into the website.
My first impression of Wapple.net is an excellent one. This is a really well designed site with information presented in a clear and interesting fashion. Wapple specializes in building websites for mobile devices. I am very impressed by how everything that I need is neatly above the fold. I have the ability to access all of the major navigation that I need without scrolling down.
The Professional Design on Wapple gives me confidence right from the start. Navigation is prominent, a content slider shows what I assume are the main features of Wapple, and it all feels well constructed.
My biggest problem is really understand what (or who) Wapple is for. There is no tag line telling me what the sites about, so my eyes fall to the content slider for an explanation: “Mobile Internet Publishing Solutions”. Wapple explains what their service does in the blurb below, but I lost interest and looked for an explanation somewhere else hoping to find it faster. This problem could have easily been avoided if there was a quick sentence like this somewhere: “Wapple lets you build mobile websites and applications for every mobile handset and browser.”
The point is that Wapple could have gotten this message to me quickly, but instead wanted me to understand it was unique, superior and interactive: all adjectives that really don’t mean anything to me yet.
What Confuses Us
As soon as I logged in and created my mobile site, Wapple has an important notice for me:
Wapple Canvas™ is the gateway into building your mobile internet site. Here you will find all the tools necessary to create an outstanding, professional mobile site completely suited to your individual needs.
This is an example of fluff, information I don’t need to know. Marketing copy, unless it can be applied as instructional copy, should not make its way into a paid application.
In another situation, managing the styles for my site turned out to be painful. As a front-end designer, I’m used to using raw xhtml and CSS to get at the code for my site and control it’s presentation. Wapple allows me to control neither at first glance. Many of the options I would expect to find are conveniently hidden or located in a section other than “style.”
Lastly, looking around, I found the option to add a phone group. This is one of many areas of the site that could use better explanatory copy. What exactly do I need a phone group for? After spending some time figuring out the UI for this section, I created a default phone group with a couple of phones. The only problem is I have no idea what purpose it serves.
The navigation on Wapple is interesting and unique. Navigation should be simple and intuitive, or else users will not be able to easily work your website. It took me some time to figure out what the second level of navigation actually was and how it worked. This is a red flag. Here are some quick ways I think you could improve what you currently have:
- Move about us to your level one navigation. I think that About Us is a key component of the website. If it is removed from the top of the page navigation it would also leave the three links with less meaning to themselves. These three fit in a category that I feel About Us does not.
- Add a description right before your second level of navigation. This description could be fun, such as ‘Dive In:’, or it could be more informative such as ‘Learn More:”. This will allow users to easily flow through these pages.
- Add a symbol to denote which page is being viewed. On pages that have two pages in the second tier of navigation it is not intuitive which page is selected based on the shades of gray. Consider using a different color or adding a small arrow of sorts, pointing to the page you’re currently viewing.
Though it is great to have lots of thorough information, it does take me a little while to figure out exactly what Wapple is. The site could use a one sentence tag line that tells me exactly what it does. That way there is no confusion regarding what we are looking at when we view the site.
Also, there are two buttons on the home page called sign up and free trial. I don’t understand why they are different.
Wapple really seemed to deliver well when I tested several of their case study sites and their own site on my BlackBerry Pearl’s standard browser. That said, none of the sites seemed to display properly when browsing with Opera on my BlackBerry. Perhaps it’s my own settings, and it’s not something I’m dwelling on (after all this isn’t a service review), I thought it was worth pointing out since some developers might choose to use this setup on their mobile device.
Is Wapple only targeting British users? From the Sign Up Page, all of the packages show monthly pricing in Pounds. Being from the USA, I’m not entirely sure what these prices convert to without pulling out a calculator, or if this service is even geared for someone like me. If it is, maybe the site should automatically detect my location and show region-specific targeted content so I see Dollars instead of Pounds.
What We Like
Wapple.net provides a great-looking preview of my site on each and every page, helping me see the affect of every setting I change. Additionally, I like the concept behind the quick start checklist which gives me a high-level view of all of the aspects of my site that I can change, and whether or not I have changed them.
I like how the Services page presents it’s content. What I am looking for is clear, easy to find, and presented in a length which is easily manageable for a quick look over.
I also like your call-to-action button for Sign Up. I think it is a good example of what a sign up button call-to-action button should be for your site.
The examples section of this website is particularly good as it gives users an idea of what they can expect from this service in an easy and understandable way. This kind of sampling is very important in sites like this one, as it shows you the value of the product that you are purchasing and shows what you can gain from using it.
Wapple has superb Calls To Action Buttons. The Red “Sign Up” button and the “Free Trial” buttons scattered around the pages, never leave me questioning how to get started.
The Interface is very pretty, and I’m never left guessing how to use the site or navigate. Even on pages with secondary navigation elements, the experience is well thought out and simple to understand.
I also like how Wapple has separated its primary navigation from it’s Utilities. So many sites we’ve reviewed in the past make the mistake of putting all of the navigation in the same place, when an average user is likely only interested in 4 or 5 choices. Wapple realized that only a fraction of the users will be interested in “News”, “About”, “Twitter”, etc, and makes these less prominent (in navigation and in page content).
Conculsion & Suggestions
Overall, the Wapple Canvas is an easy dream with a sobering reality. I find the vision for the application immediately appealing, but getting my first mobile site online was a wholly frustrating experience.
In many ways, Wapple Canvas targets an audience similar to that of MailChimp. Both of these services help their customers adapt their content to emerging and non-standard mediums. Unlike the (relatively) mature landscape of desktop browsers, cell phones and email clients don’t always play by the rules. Both Wapple Canvas and MailChimp try and get people involved as quickly as possible, but the devil is in the details. While Wapple Canvas provides few headers, and many links, Mailchimp takes a more direct approach. By guiding their users around the dashboard and making good use of contrast, it’s hard to give the MailChimp dashboard a glance without immediately seeing where you can get started.
Unfortunately for Wapple, they have a lot to aspire to if they want widespread adoption of their service. However, by increasing their overall design aesthetic and making it simpler to get things done, Wapple can certainly serve as an invaluable asset to business targeting this market.
- Make use of Blank Slates — In many areas of the site-creation process, it’s hard to get a full grasp of the kind of site I can build. By providing me with a blank slate I can get up to speed and inolved.
- Provide Instructional Copy — In some cases, the Site Builder application presents me with a page of options and icons but no instructional copy. This feels irresponsible, and breaks my trust. How does the live preview work?
- Allow for Undo — After using wapple for 45 minutes, I found that my site was completely unreccoverable. Even if it was possible to retrace my steps and undo my work, it would have taken too long. After trying (in vain) to delete my site and start over, I gave up on customizing my home page.
- Icons should serve as visual cues, not text replacement — Throughout the Wapple Canvas application, icons are used in place of links and buttons. This is a barrier to less web-savvy individuals. While the visual cue certainly helps supplement text on the page, it is hardly ever appropriate for it to replace that text.
- Provide a sense of context — Overall, the Wapple Canvas application continually fails to give me a sense of context. It’s exceptionally frustrating to use the site builder because I don’t know how deep the rabbit hole goes. Even after interacting with the application for an hour, it feels like I haven’t scratched the surface of all of the options available to me. Providing a discrete set of navigation elements, as well as highlighting where the user is inside of the application, will go a long way towards helping a user feel grounded.
- Make better use of Contrast — Consider again the comparison of Wapple Canvas and MailChimp. In the top left of the Canvas Dashboard, we see a high-contrast icon and heading. Is this necessary? A high-contrast area calls attention to itself, so it better be valuable. However, in this case, we’re merely informed of what section we’re presently on. High-contrast navigation calls more attention to itself and therefore begs the user to jump around. On the other hand MailChimp uses orange, high-contrast buttons to provide gateways to two common actions, both related to creating a campaign and using their service.
- Make use of White Space — In many cases, the itnerface of Wapple Canvas feels cluttered. The use of whitespace in the application is greatly disparate from the whitespace found on the wapple.net marketing site.
- Show package comparison when users click sign up. This chart compairing features reminds me of a hosting sales page, such as HostGator. It allows users to clearly see what features they are getting for their money. This will avoid the confusion of multiple boxes taking up so much room, such as on the current Sign Up page.
- Simplify your navigation as I described in What Confuses Us. Currently your navigation is not intuitive and could lead to frustration.
- Consider resizing parts of text based on their importance. One thing I noticed while browsing Wapple was a consistent text size. It was hard to scan to find what parts of the page I should focus on or what parts were more important than others.
- Add a one sentence tagline
- The front page could be more streamlined below the fold
- I’m not sure what the different is between sign up and free trial. Why two buttons?
- RSS Feed button should be relocated to the top right of the homepage to meet conventions
- About Us page could use an integrated contact form
- If Wapple is targeting users from around the world, it may be wise to deliver region specific content so that Americans see Dollars and British see Pounds on the Sign Up page.
- When testing Wapple Mobile Sites on my BlackBerry Pearl using the Opera Browser, pages did not display as they should have.
- Getting to a case study from the homepage wasn’t as easy as it could have been. I wanted to see the “Watchmen” Case Study, and while it was pictured in the footer, it took 2 more clicks to get to it.
Write for UX BoothContribute to UX Booth
Contribute a guest post to UX Booth and let the community know what's important to you!