Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 13 2012

13:00

Responsive Web’s Message to Mobile Website Creators: “Rest in Peace”

If I were to begin this article by telling you that the mobile web has arrived, and it has taken our world by a storm, and it will most likely change the way we create and use websites, it’ll probably be a waste of time and effort. We all know that the future of the internet lies in mobile – if your website does not cater to mobile solutions or devices and focuses entirely on desktops, you are sure to lose a good deal of visitors. Whether or not we decide to give up our desktops and laptops, at some point of time in our daily routine, we do surf the internet via our smartphones and tablets, and trust me, nothing is more annoying than having to browse a non-mobile friendly website on a cramped screen.

One may ask, if mobile is the future of the internet, mobile website creation software must be selling like hot-cakes, right?

Actually, no.

There used to be a time when mobile website creation tools were very popular. In fact, a lot of premium software for mobile website creation had become synonymous with web design itself. However, as of late, they have fallen out of favor.

Why?

Well, this is what we shall be exploring in this article.

Mobile Website Creation…What?

The fact that I have to include this segment, before starting off with the real topic itself, simply shows that what I’m saying is right — mobile website creation tools are indeed dying.

Seriously, if I were to write about “WordPress is dying” (Oh God, No!), would I need to tell you what WordPress is?

But anyway, for the sake of clarity, we shall name some major mobile site creation tools before we actual start predicting their demise.  So here they are:

  1. mobiSiteGalore
  2. mofuse
  3. bMobilized
  4. ConvertWebsite
  5. Mobify

The above five aren’t, by any means, better (or worse) than the others. It’s just that these are the most popular of the lot, and counting their pros and cons is another story.

Now that you probably know what type of ‘mobile website creators’ I am talking about, let’s proceed with the article.

So, What is Killing Mobile Website Creation Software?

To cut the long story short, responsive web design.

Let’s read it again, slowly:

RESPONSIVE WEB DESIGN IS KILLING MOBILE WEBSITE CREATION SOFTWARE.

How? Read on!

1. Evolution of Mobile Internet

Let’s face it: the world of the internet (or even technology, for that matter) is ever changing. We had floppy disks, and now even DVDs are becoming obsolete. A decade and a half ago, animated GIFs were the norm, but today, well, seriously, animated GIFs?

Similarly, mobile internet isn’t untouched by this evolution either. With the rapid evolution of browsers and technology, the manner in which we browse and interact with the web is changing overnight. With a concept such as responsive web design, a developer/designer can keep pace with the changing trends in a better, more organized manner, as compared to mobile website creation software.

Image Credit

In simple terms, relying on responsive design means you need not wait for your software provider to give you that HTML5 patch or update.

2. Need for SMART Uniformity

Ok, so when you visit a website on your mobile, say that of a government agency, what do you have on your mind? Chances are, you want to quickly get that piece of urgent information, such as check the status of an application that you filed, or read the latest tutorial of your favorite design blog, and so on. You probably won’t marvel for hours at the nifty hand-crafted awesome social sharing buttons in the sidebar, will you?

However, when you are browsing that same website via your laptop, you can afford to spend some time enjoying those social sharing buttons (like, clicking the “Tweet” button to your left, you know, I mean…like, share this article.)

Image Credit

Many mobile site creation tools focus too much on uniformity across mobile and desktop versions of a site. In fact, this usage of the term “version” itself is the culprit here – it simply leads to a misnomer such as “why should my website’s MOBILE VERSION be lacking in any manner”? Responsive website design, on the other hand, retains uniformity of content rather than appeal.

3. What is ‘Mobile’, again?

Quick, define “mobile device”.

Having a hard time?

Actually, with the rate at which new devices are evolving, it has become impossible to classify or define ‘mobile’ in rigid terms. What is mobile today, maybe a bulky mess tomorrow. This is what causes the problem – most mobile website creation tools rely on strict definitions – how often do you read “create websites optimized for phones in minutes”? Such claims are nothing but an assumption that the phones of today are going to stick around tomorrow, and will probably not be replaced by tablets (or, if you are innovative, a small screen dangling to your television remote).

Image Credit

Ideally, at the rate with which mobile web is evolving, responsive design is the best solution to design websites catering to the mobile audience.

4. Generic Recipe for Success (Failure?)

Before the advent of responsive web design and progressive enhancement (as well as disclosure), there used to be a generic recipe when designing mobile websites: this is mobile content, that is not. Most mobile web creation tools still stick to a modified form of that recipe. However, our mobile phones have now developed to an extent that you cannot really limit mobile content to a formula in particular. Truth is, we are still only learning to employ responsive and adaptive design in practice.

To understand this fully, visualize this: assume you have launched a book in two variants: hard cover and paper back. Now, since the paperback is the cheaper alternative, will you strip out a chapter of your book, because, after all, your hard cover version is the ‘bigger’ one?

I guess not.

(On an unrelated note, I shall now include a picture of a manuscript: just to facilitate “visualization”).

Image Credit

This is what being ‘adaptive’ means: for your book’s paperback version, you will retain the content in totality, but will also find an alternate place for the author bio or info on the hard cover’s inner jacket. Responsive web design makes allowances for such adaptation; many mobile website creation tools do not.

5. Adaptive, not Adapted

A few years back, whenever you visited a website via mobile, you were often greeted with a footer text (often annoyingly placed in the header, within the content, and five other hidden places like an Easter egg): “Switch to the full site.”

What? Full site?

So, you mean, this mobile site that I am browsing is half-baked? Incomplete? Semi-finished?

Placing such a demarcation between desktop and mobile sites, one being full and the other being, well, “half”, is a disaster. You are telling the world that your mobile website is not adaptive web design; it is, in fact, an adaptation of your “full” site.

Actually, this is arguably the single biggest reason why mobile website creation tools are failing: they tend to place a line of distinction between mobile sites and desktop sites (often blatantly referred to as “mobile version” and “normal version”). Exceptions apart, most mobile site creation tools believe in such demarcation.

Image Credit

True, a mobile site is different from a desktop one, but that doesn’t mean it is ‘separate’, does it? Being different here is a necessity, but being separate is a travesty. Responsive design, on the other hand, ensures that the website adapts to the user’s screen resolution, rather than leaving the mobile “version” an adaptation of the actual site.

In the End

Coming back to the question, are mobile site creation tools dead? Not totally, but yes, they are a dying breed. While it is possibile that newer mobile development tools which cater to the changing trends may come into vogue, overall, responsive web design has handed the pink slip to mobile site creation tools.

What do you think? When creating a website, do you prefer using a mobile site development software, or simply opt for responsive design? Feel free to leave a comment!

July 03 2012

13:30

Design for Readability

Compared to their print counterparts, the web versions of many magazines give readers a decidedly poor reading experience. Most websites follow a lackluster design model. Will digital publications ever be able to compete with the reading experience that printed ones have bought readers to expect?

Web designers have it rough. Translating ideas from designs to fully-coded websites is a process fraught with challenge and, due to factors often outside of their control, most find themselves in a perpetual state of compromise. Fortunately – for writers, readers, and everyone in between – the gap between what we can imagine and what we can create is closing, pointing the way to a more beautiful, readable web.

The Standard Content Design Model

Everyone who has used the internet is familiar with what I call the Standard Content Design Model (or SCDM for short): the prototypical blog format, where “content” fills one, long, vertical column. It dominates nearly all digital publications (Hi, UX Booth readers). The SCDM is so versatile that it’s used to display search results, news feeds …anything you can imagine!

It’s the norm largely because, by default, that’s how browsers present text. It looks like this:

Three versions of the SCDM.

Cause, meet effect

A number of milestones in the history of the web have had the power to change browsers and, potentially, uproot the SCDM. With the release of CSS in December 1996, for example, designers gained the ability to quickly, easily and consistently define the layout of their designs. In theory, this was a death knell for the SCDM.

But not in practice.

Perhaps early web designers were so focused on making elements of their designs (headers, main navs, sub navs, footers, sidebars, links, ads, etc.) behave consistently that the content – the one, true variable – became an afterthought. Another (more likely) cause is due to the popularity content management systems (CMSs) gained as a consequence. Instead of having to worry about coding, CMS + CSS allowed publishers to swap out designs with the click of a button. This left them with more time to focus on content.

How would you like your content? Vertical? Vertical? or Vertical?

For those of you who’ve built a site or two before: there’s nothing new here. This is the current state of affairs with regards to publishing. And back when WordPress was only used for blogs, it was good enough.

Today, though, WordPress is used to maintain large websites with many different types of content. Applying a custom design to one post, or to a whole set of posts, is difficult and time consuming. As a result, ventures outside the SCDM are still rare – a full sixteen years after the release of CSS!

Why? It probably has to do with how we think about content in the first place.

Design before content

In the standard content model, the design (form) of a site precedes its content (function). Many people agree that this approach is off piste; function should come before form because, in many ways, it serves to define it. Jeffrey Zeldman writes:

Content precedes design. Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman

Instead of designing for content in a way that gives users the most enjoyable reading experience, web designers have been making designs (using the “standard” model), and plopping their content into it. As an afterthought.

This mindset seems to be the primary difference between designing for the web and designing for print. On the web, design often precedes content, yielding to the SCDM and the subpar reading experience that comes with it. In print design, content comes before layout and readability shines.

Head to head

Let’s investigate this discrepancy courtesy of Esquire magazine. Take this article about Bruce Jenner, father of the youngest two Kardashian’s and former decathlon Olympic gold medalist, in the June/July 2012 issue of Esquire.

On their website, the article is a perfect example of the SCDM in action. The page has 3 columns, with navigation on the left, links and ads on the right, and the article straight down the middle. The text of the article, the central content of that page, is crowded on all sides by links and ads that distract me when I’m reading. Nevermind that the article is paginated, which studies have shown decreases readability.

Now let’s take a look at the magazine version. First of all, I’ve got to include more images because the intriguing title page is a two-page spread with a photo. (Side note: was that Wheaties box designed before I was born?)

The style of this spread makes me want to read more. Varsity-style lettering is a fitting choice when your subject is a former Olympic athlete and the color scheme of the typography and section dividers match well with the photo, giving everything a sense of balance.

Turning the page, we come to the article itself. Again, custom typography plays a major role in the design. It serves to separate sections of the story as well as for decoration and contrast.

The photo here you may recognize from the screenshot of the web version, but it’s much bigger and clearer in the print version (you can’t even enlarge it on the site). The text of the story has more room to breathe, here, because it takes up all of the real-estate, instead of being confined to a fixed width down the middle of the page and crowded further in by ads, links and nav items the way the website is. Finally, the text in the magazine layout is broken up into columns so that the reader’s eyes can travel naturally from top to bottom, and from left to right.

Overall, the magazine makes for a much more pleasant reading experience. The website serves its purpose – the same content in print is available online – but if you were given both options, which would you read? I have to wonder if the poor design of their web content has a secret agenda. Maybe they designed it poorly to drive readers to buy the magazine, instead.

Designing for readability

All is not lost, though. We’ve recently seen the addition of media queries, responsive typography and web fonts to our toolbox.

Thanks in part to these milestones, the web continues to be a playground of innovation. Some designers are pushing the boundaries of what it means to properly Design around their content.

I Love Typography

I Love Typography makes custom designs for each new article they post. This one is called The Design of a Signage Typeface.

The font is big enough to embrace, the different background colors make it easy for the reader to keep their place, and the two column format allows our eyes to travel in both directions, a familiar experience because that is how we read print.

I Love Typography doesn’t always go with a two column format in a custom design, but I wish they would because it reduces the amount of scrolling. It seems such a waste of perfectly good real estate when there is only one column on the left (as they use here).

I Love Typography’s custom-designed blog posts are also designed responsively. See for yourself. (Note that on a mobile device the design reverts to one column for obvious reasons.)

Jason Santa Maria

Jason Santa Maria is famous for redesigning his website with each new piece of content he publishes. His candy series is no exception, and this one in particular, formatted in two, wonderfully even columns, is a sweet treat. Again, emulating multi-column magazine formats improves the reading experience, and requires less scrolling, which is nice.

Similarly, Santa Maria’s archive uses three columns, allowing readers to scan quickly across months and years to find what they’re looking for. As an added bonus, articles with custom layouts are accompanied by screenshots, to help the visually inclined find them more quickly.

Craig Mod

Craig Mod’s journal has an interesting design. I usually dislike type set this small, but because the columns are well spaced and each section is appropriately titled it’s enjoyable. The titles serve to break up the sections, so user can quickly scan the content. Users often scan – as opposed to read – web content, so it’s important to include subtitles.

The Great Discontent

The Great Discontent publishes artist interviews. Each interview starts with a huge header image that takes up the entire browser, much like the Esquire article we examined above (the magazine version, not the web version). No confusion who this interview is going to be about.

The interview itself occupies the middle column of the design. The top of the left column is used for the “About” section, where you can learn more about the artist being interviewed. The right column and the left column below the “About” section reprint memorable quotes from the interview, or relevant quotes from related sources. The reprinting of quotes and inclusion of relevant outside material are an old magazine technique that allows readers to scan to find the good stuff and important takeaways. It also helps hook the reader. Maybe you weren’t interested until you read that quote halfway down. You might go back and read the whole thing after that.

Usually about halfway through the interview, a second image or video is included. Notice how these images, accompanied by quotes and links, take up the whole three columns, effectively interrupting the interview itself. This is a nice break for readers. It allows them to rest their eyes, but if they want to keep reading, there’s no one stopping them from scrolling.

Finally, the previous and next arrows are displayed on the right and left at all times. These arrows subtly inform the user that there are more interviews to be read without distracting from the reading experience the way a sticky top or side nav would. It also avoids burying the prev/next links at the bottom of the article, in the usual way, so that even the reader who didn’t read all the way to the bottom knows that there is more good content to be found.

A more readable future

Fortunately, web technology develops rapidly. Over the next few years it will become easier and easier for designers to give content the attention it deserves. In the meantime, designers can do their part by putting in the extra time to design more readable content. Yes, there are hurdles to jump, but the tools are available now and some industry pioneers are already leading the way.

Developers can speed the process by focusing their energies on creating more flexible methods to format readable content (flexible templates, more custom content types, on-the-fly paragraph division to form even columns out of long content, etc) that don’t break designs and layouts.

And if designers and developers learn to work closely together, anything is possible.


The post Design for Readability appeared first on UX Booth.

June 12 2012

13:30

Women On Top: Inappropriate Dropdowns

It’s mercifully rare these days that I abandon an online form in righteous fury because the “Title” dropdown doesn’t include “Ms.” Even so, there’s often an element of sexism in these lists. Have a look at any of them, and who comes first? Men. The first option in a title dropdown is almost always “Mr”, followed by Mrs, then Miss, and finally Ms.

Although I don’t suspect companies of deliberately putting titles in order of the respect they consider due to each (well, except perhaps the Daily Mail, an organization famed for its misogyny) this is one of those conventions that makes me question it. In Forms that work: Designing web forms for usability, Caroline Jarrett writes of dropdown lists:

Order the options in a way that will make sense to the users. There may be a natural order to the options, for example, months of the year. In many other cases, sorting the options alphabetically makes it easy for the user to scan the list.

Alphabetical order wouldn’t be very helpful in a list of items that all begin with the same letter. And I don’t accept that there is any “natural order” to the categories of men, married women, unmarried women, and women-who-don’t-think-it’s-any-of-your-business-thank-you-very-much. So on what other basis might one order the list?

Survey the merchandise

Looking at a wide variety of online forms, it’s clear that most organizations provide options beyond the “four M’s”. Some allow the selection of “Other” and a free text input field:

Further, Doctor, Reverend and Professor are common additions (as with Aviva):

A few forms, including this one from confused.com, insist that doctors reveal their gender by selecting from the options “Dr (Male)” and “Dr (Female)”. Personally, I wouldn’t buy from a company who did this. One of the main reasons I considered doing a PhD was so that I could have a non-gender-specific title!

Barclays obviously hopes to count aristocrats and soldiers amongst its customers.

Boots, too, welcomes the lords and ladies, but also expects clergy to register (I suppose they need toiletries just like the rest of us – cleanliness is, after all, next to godliness).

British Airways, with its international clientele, has a good reason for including foreign titles such as Herr, Contessa and Tan Sri (a Malaysian dignitary). And there’s no reason that senators and ambassadors shouldn’t want to earn air miles.

Other organizations, like Boden, are less realistic in their listing of every possible title from Wing Commander to Marquis. How many Barons do they think are going to purchase their linen cargo shorts?

It’s precisely this (in)frequency that often seems to influence list order: start with the standard Mr, Mrs, Miss and Ms, and put the less common options at the end. And that’s as it should be – the further down the list an option is, the further the user has to move their mouse, scroll their wheel, or move their viewport on their mobile device.

Fitts’ Law states that the acquisition of a target is a function of the size of the target and its distance from the starting point. The starting point for all users will be the top of the dropdown, and all the targets are the same size; thus the lower down the list an option is, the harder it will be to select. So why not apply that principle to the full list, and order it by the frequency with which each item is likely to be selected?

Theoretically, this would increase the overall usability of the title dropdown.

Numbers don’t lie

Before we continue, it’s worth noting that I work for Age UK, a large non-profit that has data from thousands of people who’ve donated, signed petitions, bought products from, and/ or joined our online community.

I queried our members by title, and the results were as follows:

Title Incidence (%) Mrs 48 Mr 39 Miss 6 Ms 3 Dr 1 Rev 1 Other/Missing 2

In following with Fitt’s aforementioned Law, I could change the dropdowns on our site to mirror the current title-frequency. This, in theory, would make it easier to select the most common title, “Mrs.”

Seeing as I was due to carry out usability tests on a prototype for a new form for our website, I included the new title dropdown to test my hypothesis. None of the five participants (two men and three women) appeared to notice anything unusual, and everyone selected their title without any hesitation.

The new dropdown was then implemented across all the forms on our website. We also updated the brand guidelines to advise that titles should be ordered by the frequency with which each is expected to occur among the audience.

It has been six months since we made this change and the results have been positive. I have analyzed the name data collected since the change, to test whether it was causing problems for our users. There are no obviously male names associated with the title “Mrs,” which would indicate that a man had automatically chosen the first option in the dropdown because that’s what he was used to doing. Neither have there been any complaints to Customer Relations that we had someone’s title wrong. I’ve also carried out dozens of usability tests on forms with the new list order since then, and no-one has commented or hesitated.

On improvisational improvements

A word of caution before you go off and change all of the dropdowns on your website: this is not an approach that should be taken to all dropdown lists. Where there is a “natural order,” for example in age ranges, this should be preserved; and alphabetical order can help people scan for known items, especially in long lists.

But analytics can and should be used to improve the user experience of forms in other ways – for example to set “smart defaults” for radio button sets, if you have data that proves one option is considerably more likely to be selected than the other(s). It may not be an improvement to women’s lives on the scale of the Pill or maternity leave, but interaction with our forms is now a little easier for those who want to select “Mrs.”

What otherwise mundane elements interest or infuriate you with regards to online forms?


The post Women On Top: Inappropriate Dropdowns appeared first on UX Booth.

May 18 2012

16:00

Facebook’s Faceoff with Google+

In the early battle between Facebook vs. MySpace, Facebook dominated by offering a simple user interface to connect with friends. Backed by explosive success, Facebook has maintained a “we know best” attitude about design through continuous iterations. With the rise of Google+, Facebook has been pressured to address usability concerns expressed by its cynical, albeit deeply ingrained, user base.

We put Facebook to the test with a panel of five remote web testers in early August, 2011, and listened to them voice their frustrations aloud as they navigated the site performing several assigned tasks. Although Facebook has taken steps to address some of the usability concerns we exposed, issues still remain.

All testers came from UserTesting’s on-demand panel, had over 100 friends, spent over 30 minutes on Facebook every day, and were Americans between the ages of 20 and 40.

Photo privacy controls

Nine months ago, managing the privacy settings of a Facebook photo album was a nightmare. Users had two options:

First was to click “Edit Photos” within the album. Our tests revealed this was far from intuitive. Users stated they were instead searching for a “lock icon” or an identifier next to the album. What’s more, the “Profile Pictures” album – the default album comprised of photos of a user – didn’t even have an “Edit Photos” option.

Second was to manage album privacy was to go to Privacy Settings → Customize Settings → Edit Album settings. The Privacy Settings page allowed users to set access for all “your photos, statuses, and posts;” however zero testers used default settings. The Edit Album link was buried in between larger buttons and other controls that were in bold font, which users struggled to find.

Privacy settings were not located in the right context when users needed to access them. One tester said it best: “The privacy settings can get really complicated… even if I’ve done one before, it’s been awhile, maybe I’ve forgotten or the way it’s done is changed.”

Facebook's old privacy settings page

Facebook’s old privacy settings page tested poorly.

When Google+ launched, by contrast, it let users easily share each photo or post with whichever “circle” of choice.

Google+'s status update panel

Google+’s status update panel puts the “reach” of your update front and center.

Whether or not the release of Google+ was the catalyst or a coincidence, Facebook redesigned these pages in late August – just 3 weeks after our usability study. Users can now manage album privacy directly from their profile and change album privacy settings directly on their albums page. Further, users can set each status update or album its own privacy setting, inline with each post.

Facebook's new status update panel

Facebook’s new status update panel seems to follow Google+’s approach.

“Smart” friend lists

Google+’s circles were a direct response to Facebook privacy control woes, particularly managing friend lists. “Friend lists” are how you can organize your friends on Facebook. You can grant or limit access to friend lists you create to view albums, status updates, and availability in chat.

We asked users to enable only four of their best friends to see them online without instruction. To do this, they would have had to create a friend list, put these friends in the list, and then limit their availability in chat.

Easier to find

To create a friend list, users could formerly go to go to the Home page, click Friends in the left navigation column, then click Manage Friend List. If users accessed Friends from their profile, they must go to “Edit Friends.” One user did not assume the “Edit Friends” button would lead to a page to create and manage friend lists.

Friend lists are now easier to access on the left navigation bar under Friends.

Facebook’s friend lists were far from friendly.

…In the proper context

After completing the task users were still unsure about their success in creating a friend list. This was because the newly created list did not appear in the drop-down menu when selecting Custom privacy controls.

This has not changed. Furthermore – in chat – when users click “Limit Availability,” they can only see names of friend lists they have created, but are still unable to see who is in these lists or update them from here.

In September, Facebook created “smart lists” to automatically group close friends, family, coworkers, and schoolmates. For many users, these ‘smart lists’ are arbitrary, as sharing decisions are most often based on relationship comfort level –– not organizational ties.

Facebook chat

Coincidentally, our August study ran right after Facebook chat launched. We found that users were confused that friends appeared in their chat bar who were not online. One frustrated tester complained he could not feel certain that he could see all his online friends in the chat sidebar, since Facebook includes offline friends in the mix. When he realized he could not chat with friends who appeared in his chat list, he assumed that chat was broken.

Likewise, one woman was completely confused when she saw her daughter appear in the chat list, realizing this was impossible since she was standing there right next to her.

Users felt that some online friends were “missing” because they could not scroll up or down the list to make sure. Days after the launch, Facebook added a scrollbar. However, offline friends still appear in the list.

After the test, we asked users what features they wanted in chat (UserTesting provides customers four, written, follow-up questions after the video test). Five out of five users wanted the ability to be invisible in chat. The common reason was they did not want to be messaged by certain people at certain times. Interestingly, no one was interested in being “away” – one user commented that Facebook status updates have taken the place of “away messages” (of the AOL era) as an indication of our current state in life.

As there are likely millions of people who have Gmail open in one tab and Facebook in the other, Facebook could take note. (Facebook Chat is more comparable to Gchat than Google Hangouts, which has higher functionality for group chats.)

Where search meets social

Facebook identifies as a social discovery engine, not a search engine. However, as Facebook nears the one billion user mark, it’s become increasingly harder to find the right person, page, or app you’re looking for.

Users were asked to search for friends by current city and for statuses that contained the term “vacation.” Two users expected when they type something in search and press enter, they would go to the search results page. However, Facebook takes users to the first result that comes up. That would be like googling something and automatically being redirected to the first result.

As an example, when one user typed in “vacation” into the Search bar and pressing ENTER, he automatically arrived at the “Pet Society Vacation” app page.

We observed two users try to click the magnifying glass option in vain trying to perform an advanced search.

Little has changed with search since our original Facebook user study. To perform an advanced search, users must type in a term in the search bar, mouse down to “See more results,” then go to the left menu column to add more filters. Meanwhile, Google+ lets users easily search any person, page, and even content and has filters clearly on the results page.

Our suggestion? When users hover over the search magnifying glass, offer a drop-down menu to do an advanced search. This aligns well with what we observed. Further, when you press “Enter” in Search, take users to a search results page. If the first result that shows up in the results preview is what the user wants, the user could click on it – or press the down arrow, then enter – on their keyboard.

Conclusion

Move fast and break things is a great motto, but it just seems like when features of a very successful company lack usability – the general sentiment of the people is, “They don’t care about us.” Users in our original study expressed that Facebook made some things difficult on purpose as if they were being tricked for some ulterior motive.

Facebook has since taken conciliatory steps to address the issues exposed in usability tests, but their reputation as a top-down all-knowing power prevails. If Facebook wants to win the battle with Google+, they should humble their design decisions down to the needs of the user.


The post Facebook’s Faceoff with Google+ appeared first on UX Booth.

April 22 2012

21:00

Is Responsive Web Design the Right Path to Minimalism?

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

It is necessary to first point out that by NO MEANS is minimalism a trend! In actuality, it is a design style that emerges to prominent use in accordance when society’s common desire shifts towards excessive wants. If that is the case, what could this guy be talking about?

Well, in recent years the web community has been strongly gravitating toward minimalism as the go-to design approach. Recently some newly popular styles were coming along, the most notable of these being Parallax Design. However, since then, Responsive Web Design came about, seemingly delaying the surfacing of a new prominent design style. The question going to be answered here is whether minimalism was rejuvenated by Responsive Web Design, or not?

Before going into this question, it is important to briefly see how Responsive Web Design sprouted up and where minimalism as a trend was initially heading.

Responsive Web Design’s Beginning


*Image Credit: nickfarr

Ever since the iPhone was first introduced, it put an immense pressure on any web designer or developer without mobile experience to gain some, and quick, before they end up out of a job.

Then in 2010, CSS got media queries introduced and everything changed. Later in the same year, Ethan Marcotte wrote an article for A List Apart, essentially coining the phrase Responsive Web Design. This of course later lead to his eBook of the same name, which is a great read by the way, being released in 2011. This then led to many different articles, tutorials, and frameworks that made the learning curve quite easy. By the time the community was able to truly grasp what was all rapidly happening, Responsive Web Design had already taken off like a rocket.

Where Minimalism as a Trend Was


*Image Credit: caribb

Remember when minimalism first appeared during its most recent stint of dominance? A good estimate would be about 2008, or 2009 I suppose. For those that don’t (and all of those that do) remember can agree that it came at a much-needed time. Before, the web was in a true state of complete over-saturation because of the widespread use of grunge. As far as the eye can see into the deep cyber blue ocean that is the web, the majority of what was being seen was grunge. In the delightful places where grunge wasn’t present, it was all about overly aesthetically appealing designs that added no extra value to the end-user. Some sites like this still remain today, you’ve probably seen one or two this week.

Then out of nowhere the clean, direct, and detail oriented design style of minimalism started to gain prominence. The web would do a 180 degree shift of sorts to the exact opposite of where it just was. Where unnecessary graphical pleasures ruled, the necessity focused design approach took its place.

However in 2010, minimalism as a trend was at a crossroads so to speak. The dominance of the web being seen could easily be gone, or something could happen to revitalize it.

The Connection


*Image Credit: alles-schlumpf

Lets put things into perspective. Minimalism grew to become the go-to design style somewhere around 2008 and 2009, pretty good estimation. Responsive Web Design was first introduced with the addition of media queries to CSS and Ethan Marcotte’s first article on the topic published on A List Apart, both occurring in the year 2010. Now by 2010 minimalism’s reach grew to span the vast majority of sites on the web and this of course led to somewhat of a stale feeling for those that tend to reject complacency. Which would probably be the entire community of web professionals.

Minimalism grew to be too big for its own good in 2010, and Responsive Web Design came out around 2010. Right now both these design approaches have the web in their fictional palms, connection?

How Did This Come To Be


*Image Credit: kat st kat

Some people may be wondering right now about how this connection came to be. Well, that is exactly what we’re going to be looking at right now.

They Compliment Each Other Well

As earlier mentioned, minimalism is a very detail oriented design approach that tends to shun aesthetic additions just for the sake of making things look better. Every aspect has an intended purpose that aids the end user’s experience, and that is what’s most important.

Responsive Web Design is all about being able to have the full experience of a website, but the trick is it has to be able to seamlessly do this on any device and screen size. To do this, the design of the website must be focused around making sure the desired message is clear and easily understandable. Which means all the extra, and unnecessary, aspects may need to be saved for use somewhere else.

They Both Put an Emphasis on Content

The main goal of each can easily be described by calling it one and the same. Minimalism’s main goal is to bring as much attention to the actual content as possible, and then using aesthetic touches to increase its appeal. In Responsive Web Design, the content is king. This is because as the site changes in size, the content becomes a more important factor to the visitor. Of course it is the original reason why anyone would visit, but on smaller devices the content is the only thing that should matter.

Easy Adaptability

Minimalism is a very pleasant visual experience for viewers, and this same pleasure can be found on any device and screen size without any excess effort. This one reason probably does the best job at putting rationality behind why Responsive Web Design clings to it so well. They are both about adapting to their environments, without losing quality or their identity, and both do this quite well.

Minimalism was Popular at the Right Time

It wouldn’t make sense to start using a new advancement in web technology with a new design approach, that is if the already popular one is a perfect match, would it? Of course not, so that is why most tutorials found today on Responsive Web Design will be done with websites using a minimalist design approach.

In Closing

The connection between these two respective design approaches is quite clearly understandable after taking a little look. Both share the same goal and intended purposes with what they want for the websites they are applied to, so of course they would get along. They also do a good job of helping each others trend shelf life, without actually being trends in essence. However while both these approaches are useful and quality design approaches, no trend lasts forever — no matter what the circumstances.

Any Thoughts You’d Like To Add To Better Explain How Responsive Web Design Can be Added to Minimalism’s Current Popularity Streak?

April 08 2012

11:00

A Handy Guide to Proper Typography for a Successful Design

Basically, typography is the art and technique of arranging typefaces for communication purposes. In other words, typography is a simple arrangement in order to transmit a message, while good typography is the attention to visual accuracy and details, even the small ones. Typography started when writing appeared. The most simple arrangement of letters was also some sort of typography. Nowadays, typography is an element we see everyday and everywhere — Prints, Books, Newspapers and letters, TV and Web. Even the foremost websites were caring about typography, and were trying to improve it as much as possible with the resources available at that time.

Web Typography

Image Source

Web typography is just one of the most recent branches of the general typography concept. While images can also transmit a message, most of the content available on websites is made up of text, that is why so much attention has been given to web typography lately. While planning and designing a web page, typography isn’t less important than the visual hierarchy, selection of correct colors, functionality and many other features. We should never under-estimate the importance of web typography, nor think that it plays a minor role for a great user experience.

Anyone who strives to have amazing typography must understand that print typography and web typography are totally different things. While some principles may be the same, web design is a totally different “environment”. Both print typography and web typography have their own rules and guidelines which must be respected. A crossing of these two may result into mixing different principles which almost have no chance to exist together.

Hierarchy

While you may already be familiar with hierarchy in web design, you may feel that there is a hierarchy in typography as well. Hierarchy in typography will give you a starting point for reading the text displayed. This is quite important because you always want to deliver your message correctly and you want your readers to understand it properly. Lots of websites don’t have this issue anymore but you should keep it in mind, so your website doesn’t appear on a one-century-old websites’ list.

Spacing Issues

While there are really very few websites with typography hierarchy issues, there are quite a lot with spacing issues related to their typography. As there must be a logic in spacing between all elements on a website, so there must be a logic in your typography spacing as well. You may want to get familiar with a few terms like: Leading Size, Kerning, and Tracking.

Leading Size is the tool which allows you to increase or decrease the whitespace generated between the text rows available. You can read here why increasing it will help your readers reading your text. Kerning is the process of adjusting the spacing between characters in a font with the aim of achieving a more pleasant visual look. By using the Tracking tool, you can achieve almost the same effect, the only difference between Tracking and Kerning being the space generated. While tracking generates an equal amount of space between each character, kerning adjusts the space based on character pairs.

Colors and Color Palette

Image Source

The colors in typography don’t specifically mean the color of your text which is usually of one color, instead they mean the over-all colors used on your website. All the colors and graphics used on the site will represent a “background” for your text, that is why you should be careful with the colors used. They must always fit the color of your typography, and should never obfuscate your text. You can also experiment with bigger-sized typography (also called as macro typography) to achieve better results. Defined in a simple way, macro typography is the use of bigger-sized text for attention-grabbing purposes. It is usually not longer than 1-4 words that is why it is important to keep it as short and correct as possible. It may be followed by some heading-sized text under your key message, but it’s not as important because that isn’t the focal point on your site, while big-sized text is.

Examples of Macro Typography in Websites

Purple Bunny

Matt Hall

VS

Font Pairs

Font pairing is the process of combining 2 or more typefaces with the aim to create a nice combination. While this sounds interesting, for beginners it is a hard job. Choosing one font, or a few fonts that are nice is well, but when your aim is to combine 2 fonts to achieve a perfect paring, it is much harder then it sounds in theory. Font Pairing has the aim to reduce the flatness which may be created while using one font choice, even with different styles. It would be a good practice to use one font for all headlines you may have while the other one for simple paragraphs. There is even a great book by Douglass Bonneville with thousands of font pair combinations for those who’d like to see ready examples.

Contrast of Size/Weights

It would be a big mistake if  you make your fonts non-differentiable. As you already know, it is very important to use a pair of fonts in order to have decent typography, and not some uniform text. Even if you have found an amazing font pair, you shouldn’t forget about setting correct sizes and weights for your fonts. Setting unsuitable weights and sizes will basically ruin your pair as it will become hard to understand that you have used different fonts. Your fonts should never be lost in the background because of similarity, incorrect size or mismatched background color.

Font-Replacement Methods

Image Source

The old times are gone when designers had to use only fonts available on user’s computers or even images with text so they would see the correct font. As technology evolves, HTML5 is starting to get over flash, and there are a lot of amazing tools which would let you replace any font they have in the collection, without making your users install any specific font in order to view the text correctly.

@font-face

@font-face replacement method is one of the easiest methods. It has been introduced only a few years ago. It is really easy to implement as there is no more messing around with Javascript and jQuery code while you are installing it. It only relies on CSS, and takes addition of a few strokes of code to be up and running. The only con which font-face may have is that rendering is interpreted in different ways by different browsers. Using the latest versions of browser should minimize this problem, but, anyway it’s on the horizon and we mustn’t forget about it.

Google Fonts

Even though Google released its font directory only in 2010, it already has almost 500 font families. Google Fonts API is being widely used because of its simplicity and trust the company has built itself overtime. The only con Google Fonts has is its lack of really qualitative typefaces. Even if Google offers full font families, they don’t have those premium-looking fonts which would make your website stand apart.

Typekit

Typekit is a well known service which has been used a lot over the years. It has become really popular because of its huge font collections. It has almost one thousands fonts and most of them are looking amazing. Typekit got popular because it offers those premium @font-face solutions that Google doesn’t offer. Launched in 2009, it also got some popularity being founded one year earlier than the Google Font directory. The only con which troubles some of its potential clients is the paid subscription method. It is a yearly fee you have to pay, besides this, you are also limited to a specific number of page views per month and fonts per website, depending on your plan.

FontSquirrel

The best thing about FontSquirrel is that it has lots of fonts available which are used widely and it is absolutely free. It is being loved for the number of nice fonts it provides and the absolutely free usage on as many websites as you would like. FontSquirrel even allows you to use a @font-face generator which lets you create your custom kit @font-face fonts.

April 06 2012

11:00

Guide to User Flow – The “Foolishly Ignored” Backbone of Website Design

User Experience, Responsive Web Design and similar terms have made such a serious impact on the lives of web designers that they have almost forgotten the core of website design – User Flow. I hope that we, the web designers, remember that website design is not just about “how it looks” but also about “how it works”! It is easy to get sentimental with your passion – website design – which forces you to jump right into the website design phase without considering the end user expectations. Website designers concentrate so much on the information architecture of a website that they tend to forget the user flows that are the basis of all conversions benefiting the website. We can either give up on end user just for the look (and all other silly adjectives) of our website or start giving priority to User Flows in order to increase the returns from the website.

So, once you have made up your mind that you will break the shackles of information architecture, aesthetic looks, user experience, responsive design and other silly terms then you can start reading further. It is time to design user flows.

Know Your Goal!

Oh please! Can we have a new sub-heading?

Actually, I know that “Know Your Goal” thing is an obvious subheading to start with but it fits well in this scenario. See, you cannot start designing user flows unless you know what you are going to design for. This is when it becomes important for designers to sit with their client and understand the basic purpose of the overall design. Are they looking for sales or are they looking for a page which they can get the visitors to sign up for their email list?

See, web designers must understand that the questions mentioned below aren’t the reason why you are designing a website:

  • Do you like the new design?
  • How is the new layout?
  • What do you think of the latest UI improvements? Are they impressive?

Clients might target positive answers to these questions but sooner or later they will understand that their positive reactions are good for nothing. At the end of the day conversions matter for any website and if the new design isn’t bringing in conversions (in whatever beneficial format) then the newness of the website is worthless.

Henceforth, next time when you have a website design project, think of the user flow which is going to benefit the overall design. Two major pointers that will help you keep a check on actual user flow and how to design for them are:

  • The business purpose of the website – These will decide the respective action that you will want the website visitor to take in order to help the client achieve the business purpose.
  • The user’s objectives – This is more like for-the-user tactic where the user flow is all about the user. Here the purpose of designer is to understand what exactly will the user look for from the website, their desires and their needs? At the end of the day it is all about satisfying these desires of the end-user.

Your User Is Your Goal. Explore Them!

We are discussing the importance of User Flow for a website henceforth it has to be the user who will make or break the website. The job of the website designer is to understand the users and their requirements. One needs to start with a detailed study of every possible website requirement and the kind of final product that the client is expecting. Some of the example user objectives to get you started are:

  • Finding specific content.
  • Buying a product.
  • Buying a gift for someone (which is different from buying a product for yourself).

Now, the hidden business objectives for which clients would want to launch a website that covers such user based requirements will be:

  • Increase subscriber base.
  • Sell specific product.
  • Earn leads.
  • Get the product promoted on social networking sites with the help of user only.
  • Create a database of contact details.

A website designer who clearly understands the requirement of both parties (user and end client) will have a sure advantage over those designers who aren’t putting importance on user flow.

Define the Start and End of Your User Flow

User Flow is a state diagram of sorts which defines the path that the user will follow when it visits a particular website. We must understand the initial point from where the user starts and where their should end. It is these two points between which the website designer will have to carve his own space that will give the requisite comfort to the user.

Typical mediums via which a user can enter your website are:

  • Subscriber Emails – Users can come from a newsletter email that is sent to them.
  • Social Media – Users can use your links in the social media world to land on your website.
  • Paid Advertising – Google AdWords campaigns and other similar paid advertising methods are an important way to guide users to your website.
  • Organic Search Queries – Google Traffic (which results from organic search queries on Google) is an important source for website traffic.
  • Referral Links or Press Publications - Users can come to your website via various blogs ( and other similar sources) that are talking about you.

Important Questions to Consider

When designing User Flow it is important to understand that detailed analysis of the requirements is a must. In order to get a clear picture of what users will be looking for, web designers must conduct in-depth interviews of their customers. Look, anybody can collect information that is nothing but speculation, but that is not how a website user flow is designed. Making stuff up as you go will take you nowhere.

So, take a printout of the following questions and add a few more from of your own. Then start answering each of them in as much detail as possible:

  • What unique features of your website or product are most appealing to the end-user?
  • Which kind of user would want to use these features?
  • Why would they want to use these features?
  • Are there any other desires that these users have?
  • What sort of problems are they facing in fulfilling these desires?
  • What kind of questions do they have about your website or product?
  • What are their hesitations?
  • What kind of information will they want if they plan to take any action?
  • How can you touch the user emotionally so as to make them perform the desired action?

Present Crystal Clear Information

I have always preached about being “Crystal Clear”. No matter what we are up to, we must understand the importance of Crystal Clear Information. I agree that most of us are here to earn a fortune and we are all very much determined to do anything that will help us reach that goal, but this should not mean that we start deceiving the end user just for a few extra dollars.

The purpose of User Flow is to fill in the gaps that are left while designing a website. This is done by following a detailed User Flow which covers every small pointer that concerns the user. See, the goal of a website designer is to shape the thought process of the user in a manner that they are determined to perform the action for which the website was designed. It is about optimizing every step which the user will perform in order to sell your product. Below pointers will help you shape the thought process of the user:

  • Every step (or webpage) that the users visits must present a very clear picture of what the whole setup is about and how it will benefit the user if they perform the next action.
  • Give the user detailed information and give them the offer to grab extra benefits if they perform the desired action. Also, make sure that these benefits are worth the user’s time.
  • The information presented must be easy to digest and the user should not feel like they might just get tricked.
  • Minimize the amount of friction that users face while moving forward. Look, if you ask for extra information from the user then it might just act as a turn off and they might hop to another window. Get the picture? Don’t ask users to perform actions that are of no benefit to either side.
  • Present very clear approaches to next steps so that users aren’t confused of what needs to be done.

Further Reading

User Flow is a science in itself and it cannot be mastered after reading just a couple of guides. It is a time-consuming process and requires web designer’s diligence to reap positive results. Below, we present you with more guides that can help you approach User Flow in a smarter fashions:

April 03 2012

11:00

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.

Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

April 02 2012

11:00

Cool Tips and Resources to Make Your Website Tablet-Friendly

Is your website ready for the Tablet Revolution? Unless you are one of those Doomsday Preppers and you’ve been living in your bug out bunker for the past few weeks, you know iPad 3 just hit the market, and people are going crazy over it. It’s only taken a few years, but the release of Apple’s iPad, among all of the other tablets, has created a new HUGE trend that website owners need to be aware of. The Tablet Revolution, as some are referring to it, has cause many website owners to rethink their website design and layout. Earlier you could simply build a website for desktops and laptops. Then mobile smart phones came along and changed everything. Many website owners now have a mobile version of their website ready for any visitors who decide to stop by from their mobile phones. Well, it’s time to update your website yet again, this time for tablet owners. In this article we are going to cover why it’s important for your website to be tablet ready, talk about some Do’s and Don’ts, provide some example companies who are making sure their website is tablet ready, and provide you with the tools and resources that you need to create a tablet-ready version of your website.

Tablets have been growing in popularity over night

Tablets have been growing in popularity over night

Image Source

Why is it Important to Make Your Website Tablet Ready

International Data Corporation predicts that by 2015 more U.S. Web users will access the Internet through mobile devices than by using personal computers. 2015 is only a few years away and obviously in order for this to come true, the trend between now and then is UP.  Think about it. How many times have you gone to a website from your smart phone only to realize it’s clunky and you cannot navigate through the site easily? How long do you stay on that website? How often do you return? Using that same philosophy, now think about what tablet users will do if they hit your website and it’s not tablet ready. With more and more consumers using the Internet from their tablets, it’s critical that you take some time to update your website as soon as possible.

Do’s and Don’ts for Creating a Tablet Ready Website

Now that you realize how critical it is to create a tablet ready website, let’s go over some Do’s and Don’ts. Let’s start with the Don’ts.

If you’re doing the following, your website is not tablet ready:

  • Don’t include Flash if you want your website to work on iPad.
  • Don’t have too many clickable areas (links, etc.) too close to one another. Make sure your navigation is easy to find and easy to interact with.
  • Don’t have too much media cluttering your site. Photos and videos are great, but too many on any given page can make the site looked cluttered and could possibly even cause loading issues.

In order to make sure your website is tablet friendly, here are a few things that you can do:

  • Access your current website from a tablet to see where the hang ups are, what looks good and what doesn’t, and what the overall experience is. Take notes and brainstorm ideas for making your website function better on tablets, while maintaining its functionality for laptops and desktop computers.
  • Add more “on the go” content and information. One of the biggest advantages of tablets are that they can come everywhere with you. Tablet users are mobile and that could mean that they are looking for more “mobile-related” content. Think links to Google Maps, your contact information, etc.
  • Make sure your website font can be easily read from a tablet. Glare and lighting, as well as, a smaller screen size can make certain websites hard to read from a tablet. Usually laptops and desktops are set up and used inside and in well lit areas. Again, tablets are mobile which means lighting is going to be an issue more often for tablet users. Update your website font style, color, and size if you need to.

Following the steps above will help you get started updating your website to be more tablet friendly.

Example Websites that Have Become Tablet Friendly

Tablets have acquired several versatile usages, including reading

Tablets have acquired several versatile usages, including reading

Image Source

In just under 2 years, the release of Apple’s iPad has created an unimaginable amount of change across a multitude of industries. With more and more people surfing the Internet on tablets like iPad, more and more businesses are taking notice. Here are a few examples of big companies who have made their website tablet ready.

  • Amazon.com – In 2011 Amazon made a huge push into the mobile space with the release of their Windowshop iPad app and with their new look website. Brennon Slattery of PCWorld commented, “the new look and feel of Amazon.com screams tablet. It has a lot more white space, the messy sidebar on the left is gone, the search bar is enlarged for touchscreen fingertip use, and the product photos are easily clickable icons”.
  • Utah Government – Last August the state of Utah released an updated tablet ready website to make interacting with their website easier for tablet users.
  • Nike – Nike has updated their website to fully take advantage of the tablet interface. Nike’s website is one of the very best examples of a tablet ready website.

As this new tablet trend gets a little old we are going to see more and more businesses begin to overhaul their website to ensure tablet users can easily navigate and interact with their website.

Tablet Ready WordPress Themes

Are you running WordPress for your website? If so, then you’re very familiar with WordPress themes. There are millions of free and paid version of WordPress themes out there for you to choose from. That said, as of today, there aren’t a ton of WordPress themes that will allow you to have a website that looks good on laptops and tablets. If you’re running WordPress and want a theme that you can install in order to create a tablet ready website, here are a few good ones to choose from:

  • Onswipe – Make your blog look beautiful on tablet web browsers in under 3 minutes.
  • MobilePRO – A beautiful professional WordPress theme for mobile devices. However, it looks great on any computer screen.
  • Mobility – An iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin.

Tools and Resources to Create a Tablet Ready Website

Converting your website into a tablet friendly environment sooner rather than later is something that can separate you from your competitors. We will end this article with links to various resources and tools that you might want to check out if you want to take advantage of the Tablet Revolution and create a tablet ready website.

Pressly automatically lets you beautify your online publications

Pressly lets you beautify your online publications

  • Pressly automatically makes online publications as beautiful and touchable as native apps when visited on tablet web browsers.
  • For anyone looking to learn a little more about what the future holds for Tablet e-Commerce I highly recommend checking out Zmags recently released ebook entitled, “Mobile and Tablet e-Commerce: Is Anyone Really Ready?”.
  • Learning HTML5 would be a great skill to have if you’re thinking of making your website more tablet ready. Todd Anglin said, “virtually all modern devices with a web browser have broad support for the technologies defined by HTML5, like Video, Geolocation, Offline Apps, Local Storage, and CSS3 styling, making them the perfect target for aggressive HTML5 development.

Now that you have more information on why it’s some important for you to update your website tablet ready design and navigation, do you think it’s something that you’ll make a priority over the next 6 – 12 months? At the very least, open your website on a tablet to see what it looks like and how easy it is to navigate. Let us know your thoughts by leaving a comment below.

March 30 2012

11:00

A Handy Guide to Better User Experience

In simplest terms, UX, also known as user experience or user usability is the way most basic users feel about using an application, a program, a website or anything. User Experience is based on the reactions and responses the user performs and provides. While it can seem related to gaining feedback, it is actually not the same. User Experience is meant to understand and make the user reach the “final goal” which is defined by the owner of the product. Whether this goal is getting the person to subscribe to your newsletter, or make him buy  your new t-shirt, the main goal of the owner is to make the user’s way as easy and hassle free as possible. There are many factors which can influence a user’s experience with your system/product. The following are some of the most important factors.

User’s Previous Experience and State

Image Source

User’s previous experience is probably the most important factor which can negatively affect your user’s experience with your product/system. There is simply no easy way you can teach an old man to play the latest Angry Birds game, if he sees it for the first time in his life. Same goes with user experience. While a lot of internet users are actually pretty familiar with many technologies (considering just the user side, not the internal/developer side), if you come up with something really fancy and awesome, something really unique, that there is no easy way you will get everyone in the audience using it as if they “were playing with it, since young age”. When deciding on any system, you must have the simplicity principle in mind as well. Overuse of elements may crush or lower your user-experience which will eventually lead to a loss of sales/customers etc.

System Properties

Image Source

You shouldn’t even bother about your user experience data if your system isn’t perfect… or at least near-perfection level. After the page has been reloaded, the rate of leavers is about 25% which is actually a quarter of the sales/subscribers/customers you could have achieved! Having a flawless product is really important. Many clicks in order to perform a single action, also force users to leave. No one is interested in browsing 3-4 pages in a row only for watching a video describing your service. The most important key point to keep in mind, regarding your system defections is: “Save their Time, and they will Save Yours”.

Small Details which make Big Differences

Image Source

There are several minor things which tend to create either big successes for you and your product or cause your unavoidable fail. Bounce Rate is a pretty important factor which must be taken into consideration. Bounce Rate refers to visitors who tend to leave the website before making any action, even browsing the homepage. Modern traffic analyzers, such as Google Analytics provide us such data, so we know exactly where is the problem with our system. Maybe you’ve built an extraordinary product, but you haven’t generated any sales which can create a lot of questions. It is very important that we analyze correctly the bounce rate data, so that we know exactly if there is a trouble with the system over-all or any page(s) in particular. Avinash Kaushik, a google analytics specialist says that a 35% bounce rate is concerning where a 50% bounce rate is actually worrying. User targeting is one of the most basic troubles related to bad UX. Incorrect targeting is a basic mistake which must not be performed by anyone who wishes a decent audience. You wouldn’t like to target teenagers to your site for selling car washing solutions or under-ages to websites about alcoholic drinks. This will not only make you lose your money (if you are advertising) but will also mess up all the bounce and traffic rates you may have.

Analyzing UX Elements and Details on Websites

Forms and Fields

Besides buttons, forms tend to be the most used UI elements in any website designs. You can basically see them on any website in any place: header, content area, sidebar, footer. They can be of any type and represent input fields for collecting info (such as subscribe forms), forms for messages, search forms, forms for comments etc. As you already know, our main goal is to make user experience as easy and understandable as possible. This is why, when working with forms, you should always keep in mind a few details which will make your forms more user-friendly and will help your users fill them without any problem.

Use Unified Text Fields

Unified text fields can actually be filled much faster than the regular, non-unified ones. The basic user tends to spend more time performing eye directions and imputing info from the side on regular fields, and in doing so, losing their precious time, which is definitely not our goal.

Plain Search Forms

A “button-less” search form allows users to perform easier searches. Many designers use plain forms for search, because they think that those will fit better into their designs, rather than forms with an addition of a button. It isn’t a good practice simply from the designers’ perspective; using plain/simple search forms actually makes your users perform easier site searches. Rather then imputing their search term by typing, then grabbing the mouse and performing one more click, you just let them skip 2 steps, which is again a time-saver!

Field Confirmations

One of the most UX-unfriendly situations is when you fill out a long form, after hitting refresh you actually realize you’ve imputed some wrong information. That’s where automatic field confirmations come really in handy. These types of confirmations usually flash an error message if the users have left any field blank, or any information is wrong: such as an email address without the ‘@’ symbol.

Navigation

It is a good UX practice to always set your links located on the top of your page, and especially if your navigation bar links open up in the same browser window. It is a well-known fact that you should only set external links to open in a new tab, and never let your internal links open up in a new tab or browser window as it may totally ruin your visitor’s stay on the site. A lot of people prefer links to be opened in the same tab, however, you can make an exception on external links, but never on your internal ones.

The Order of Placing Links in the Nav Bar

You have probably seen that all sites tend to put the “Home” link at the beginning of their navigation bar, and links which require action, such as “Contact Us” at the end of their link “row”. The placing of these links isn’t dummy or random — all of this has a specific logic and the user’s “ease of use” concept in mind. A lot of websites tend to put links in their navigation, either by their importance or by level of information offered. It is a common example to see the “Home” link followed by an “About Us” page because it is the starting point for offering information. The “About Us” page is usually followed by a “Portfolio” page or a “Know the Team” page, which is the 2nd informative page on most sites, after the “About Us”.

Conclusion

The key is to always think about how your users will perform. You should attempt to make their task as easy as possible, save their precious time, and try to achieve the most important goal you have: engage them!

March 28 2012

17:00

Stop Designing User Experience! I Mean It!

User Experience this! User Experience that! Stop it, will you? There’s plenty enough research done about User Experience . Now, can we please start designing? The problem with the Internet is that literally anything can go viral in no time. Same has happened with the keyword User Experience (UX as the nerds call it). Wasn’t aesthetically pleasing design the end goal for every designer? Then, from where did this term UX find place in our brains and how come it dominates our thoughts? Isn’t an aesthetically pleasing design that delights our user enough to keep them riveted?

Well, lots of questions there. I might be acting a bit extreme but I am a bit upset. I am upset with the trend that has forced an average designer to read tons of content about User Experience just to understand whatever it is. For me, UX is totally unrealistic. And whatever is unrealistic cannot be designed. Let me prove my point!

First Things First. What Is User Experience?

Click on the sign up button on any page and it takes you to the signup page which requires minimal user input before registering the user. Well, that is good User Experience. A slow loading webpage is part of UX and an out of location slider is part of UX too. Bad or good, but everything that happens on a website is User Experience.

So, UX is photography, coding, graphics, security, branding, information and design etc. Basically, UX is literally everything.

So, Who Are UX Designers?

Read the pointers above? Now, people who are involved in all those activities and other related activities with respect to that product can be tagged as UX designers. Be it the team lead, the project manager, the graphics designer, the content developer, the think tank team or even the testing team. All of these combine to form a consultancy group of sorts that helps the client to understand the importance of User Experience.

Did you ever stumble upon a client who wanted to focus on User Experience instead of the product? Did anyone ever ask you the question – “Where to find a User Experience Designer?” Well, such situations don’t come up as such terms are designer specific. All that customers look for is, as I always say, aesthetically pleasing design.

User Experience was a term that popped out of somewhere. It must have been some genius web designer with a lot of free time who coined this term. Later on, it grew as it was something new. It helped a lot of designers get a job of a new kind. It helped industries squeeze more money out of their clients. And, it helped writers to write about something which wasn’t heard of before. But, I guess now it is high time that designers take their words back. It is time when designers should give up on the concept of User Experience as it has done nothing new for the design industry. It is time when we stop talking and start concentrating on the aesthetics of a product.

Get It, But Why Not Design User Experience?

Well, I have my reasons. Let me list the most important of them all.

Those who have spent time in the web design industry will agree to the fact that users are very unpredictable. No matter what sort of analysis you perform, at the end of the day you will stumble upon users whom you cannot satisfy. Even when user experience based testing of any web design is done then too results aren’t satisfactory. The reason is very simple. The thought process of users in your dummy testing will never match with the thought process of real-time users. It isn’t really happening no matter how hard you try to immitate the real time user base.

Assume that you are designing a Facebook app which will focus on users from one country. But, what if that app gains fame in other geographical locations? Remember what happened with Orkut? Although Google launched Orkut in the US it garnered all the fame from India and Brazil. Who would have imagined that would happen? If Google knew this then they would surely have designed Orkut especially for India and Brazil.

We will never find out where exactly our hard work will be used and how will it be greeted, if at all greeted! Henceforth, assuming that you can design specifically for User Experience is assuming that you know every user and is a dumb mistake.

Isn’t that self-explanatory? User Experience is a very volatile term in itself. Internet has evolved exponentially in last few years and so has the perception of users towards the Internet. They have become extra vigilant and smart like never before. This results in ever evolving user experience which demands for more.

Now, in such a scenario it becomes impossible for designers to design a product which evolves with the ever evolving user experience. Nobody can design such a product. None! This simply proves the fact that our basic aim should be to design a product which is aesthetically pleasing instead of designing a product which is completely incomplete.

Got It? Now, Start Designing “For” User Experience!

Confused? Well, there is a difference between what I was suggesting before and what I am suggesting now. All that I am asking for is that so-called “UX Designers” should cease to exist. See, I don’t have anything personal against UX designers but I have issues with the concept of UX Design and the way it is used to extract money out of end clients.

Peter Morville’s Facets of UX explain a lot about what User Experience can be. Once you look at the honeycomb above then you will understand what I mean by Designing For UX. There is a subtle difference between Designing UX and Designing for UX but it is important for the ecosystem of the Web Design Industry that designers understand this difference.

Conclusion

Nothing much left to conclude I guess. I might have raised a few eyebrows and shook up some settled UX designers but this is how it is. You just cannot fool the end client just by using some technical terms that have no new meaning. Let us design for the ecosystem of our industry and not for our bank accounts.

March 23 2012

10:00

Tips on Designing the Perfect Navigation System for Your Website

Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can be a big turn off for your readers if they aren’t planned well. Although webmasters assume that a simple menu is enough, most of the time yet they forget that a navigational menu has its own requirements. Sometimes a simple to use navigation will do just fine for your website design while at times you will have to click a lot of links into your navigational menu so as to compliment the various branches of your website.

This discussion will pick up some of the obvious forms of websites and then shed some light on how the navigational menu changes for each of them. Hold tight and don’t leave!

E-Commerce Websites

The buzz of today for developed nations and the future for upcoming nations, e-commerce has evolved as one of the most current businesses on the Internet and almost all of them have been able to earn their share of fame during their lifetime.

One common point between all e-commerce websites is how complex they are. No matter how simple a e-commerce portal is, at the end of the day lot of navigational links have to be used so that readers can order multiple items or continue shopping from the cart. This is when it becomes important for webmasters to come up with the perfect blend of simplicity and complexity that keeps readers on that e-commerce portal.

What better example then Amazon when it comes to an e-commerce portal. Amazon has been successful in coming up with a very simple to use navigational menu which leads to almost every category under which the company features products. Also, the search system of Amazon is next to perfect which almost always results into satisfactory queries.

One must understand that it is this two type of navigational system (menu+search) which helps Amazon to keep visitors engrossed.

News Websites

Ah, news websites! They are famous for their content heavy presentation. I am not sure if there is even one news website which I have read thoroughly. The amount of content generated by a news website is enough to confuse readers. And this is when a sorted navigational system becomes important.

Imagine a news website like New York Times with just a top navigational menu that links to Home and few other important categories. Nobody would understand the depth of the website if they used such an incomplete navigational system. It is important to understand that the general perspective of a reader for a news based website is a lot of content with a complex navigational system. So, if you are including a very in-depth navigational system for a news based website then you’re doing things right.

Blogs

Well, which discussion on navigational menus would be complete without talking about blogs? In this section we will target blogs that are content rich. One can argue that niche specific blogs can run with a fewer number of categories so the navigational menu can be avoided in these cases. In this case, we must understand that it is advantageous for niche specific blogs to divide their content into various categories. Now, these categories need to be listed in the navigational menu so that visitors can dig into various forms of content on that blog.

This is where it becomes very important for content rich and niche blogs to have all its major categories listed on every page of the blog so that navigation is a cakewalk.

On the whole, a blog can have following navigational styles to check old content which is not available on the home page:

  • Pagination - This is placed at the end of each page and gives direct links to other pages of the blog.
  • Archive Page - Some A-List blogs use archive pages which can be used to display a complete archive of articles easily accessible from that a single page.
  • Categories/Tags In Sidebar - This is a common feature used by most blogs. A list of categories or tags used by the blog can be shown on the sidebar so that they are easily accessible from every page.
  • Header Menu - This happens to be an obvious form of navigation in blogs. It can be used for linking to the most readily used pages like the Contact and About Us pages. Some blogs use the header menu to link to major categories.
  • Footer Navigation - In the last few years blogs have come up with a footer navigation where a huge footer is used to link back to literally everything on the blog. This footer can be used to connect categories, pages and tags together.

Please understand that it is the format of content and the amount of visitors that will decide what sort of navigation a blog should use. Usually it depends on the blog’s webmaster to do some form of A/B testing to understand what suits the blog the most.

Corporate Websites

Corporate websites can show extensive variations in their style. While some of the corporate websites are used as a platform to represent an already famous company. Such websites basically are the face of the company without any other meaning whatsoever. Such corporate websites keep the customers informed and that is it.

On the other hand there are corporate websites that will keep try to entice new customers. They play a different ballgame altogether but still, at the end of the day, they are corporate websites. The professionalism reflected from these websites is almost always similar.

It is this professional factor that forces corporate websites to include the least amount of navigation links. Usually, a header menu with links to basic pages is all that is required to complete the navigational section of a corporate website. To add the Midas touch a webmaster can use footer based menu if the website has lot of content that can be admired by the visitor. The footer menu will never play down the professionalism factor of the corporate website.

Review-based Websites

Review-based websites cover a lot of area and various niches all in one platform. Usually such websites target consumer oriented products and provide a platform where users can leave comments or reviews regarding a respective service.

The problem with such a website is that due to a huge amount of content which is divided into various niches, it becomes almost impossible to cover all of it in one navigational style. This is when the menu style show in the image below can come in handy.

Review based websites will use huge drop down menus which are almost like a new pop up opening on every mouse over.  This style of navigational menus gives the review based websites ample amount of space to showcase almost every category without making it look congested. White space matters!

Conclusion

Not yet done, folks! But I hope that you have an idea of how important navigational menus are and how they change without us noticing them. See, the point is that navigational menus must not be a point of concern for the website visitor. They must blend with the website and its content in a manner that they look perfectly appropriate with that respective website. Get the idea?

March 15 2012

10:00

Why Creating Minimalist Design Makes You a Better Designer

Our target as designers most of the time is improving ourselves and our techniques. There are many ways of doing this. You can read books, find an internship or simply learn a lot by example from the internet. But there are some other ways as well. You might not believe it, but by only designing minimalist layouts you will become a better designer. You might ask yourself why, therefore I thought of putting together some ideas to try to convince you that this is also a good way of improving your skills.

Minimalist designs have been with us for quite some time now, emerging from nowhere a couple of years ago. It is easy to spot all over the place as everybody longs for such a design and everybody looks to have it. People pay lots of money for revamping their websites and minimalism seems to be everybody’s direction right now.

I do believe designing minimalist websites improve your skills because there is a reason why minimalism is popular. After more than 20 years of cluttered web pages, Flash animations, large Photoshop graphics and so on, it’s time for minimalism to shine. It is indeed time to only show the information which really needs to be shown. That is if you are a good designer, obviously. Not everybody can properly design in this style – but this is a total other discussion, so let’s get back to our topic.

Minimalist designs bring in a friendly environment without clutter and confusions. Web pages are now easy to look at and are quick to analyze even by an untrained eye. After so much time of the old web era, people kind of had enough with web pages that were nearly impossible to grasp. So there is indeed a reason why minimalism is so popular. But can it indeed improve your skills?

Working on typography

One of the elements which stand out in the new web era is typography. It is also probably one of the most important elements on a website. Text becomes an element on its own in today’s design and all of us have to work hard to achieve that perfect balance. It can be picking the right font, the perfect size or a good contrast – every one of these plus many others are crucially important in perfecting your website’s typography.

Unfortunately, although it is clearly important, typography is something that is often neglected by designers. Choosing the perfect font takes a lot of time and many designers simply do not have it (or do not want to spend time on it), therefore Arial and Helvetica seem to fit every website. Well this might have been true a few years back, it is not valid anymore. Learning to properly work on typography as an element of minimalist design will definitely help you achieve something not every other designer can.

Don’t just choose random fonts. Play with them, have a palette of 10-15 and switch them around until you will get the desired effect.

Attention on the main element

Another asset of the minimalist design is the main element which is always in focus. As mentioned earlier, there is no place for clutter or any other elements which are not necessary to the website’s target. This makes designers choose only one element and focus on it. Putting the whole focal point on one element is always a challenge, but by doing it many times you will find this is a very useful skill.

Being able to make something stand out, and at the same time make the other things visible as well, is not something every beginner designer can do. If you ask me what a good designer is, then I will tell you that a good designer is the one who can put elements in focus and forget about the rest. Just because you can fill the whole web page with things doesn’t mean you are a good designer.

Closing in on perfection

When designing minimalist sites you need to focus on everything, even if it is a small pixel. Because they are so simple, it is easy to notice flaws in it, therefore designers need to close in on perfection and make every single pixel look good. If there is one element that looks bad on your page, it will stand out. By designing in a minimalist way you will learn to be “pixel perfect”. There is no other way of creating a good minimalist design.

Many minimalist designs are built on a grid system, although it is not always easy to spot it. By designing like this you will also learn to use grid systems while designing and coding. Grid systems are something I am in awe of and I think you should be too. They make your website look so much better and organized that it is almost impossible not to like it.

Use negative space

There is no minimalist design without a lot of negative space (also called “white space”). New designers are afraid of using it because you kind of need a lot of visual experience in order to make it work well. Not every piece of your page needs to be filled in with something, but this is a concept not everybody fully understands. The faster you learn and acknowledge it, the better you will be at designing minimalist layouts – and the better your skills will be.

The reason behind us using negative space is that minimalist pages only contain few elements – so the rest of the space needs to be filled in with something. In this case, because we want to avoid clutter, we fill it with the background color. Why would knowing how to properly use negative space make you a better designer? Because this concept is rather new and being able to properly use it everywhere will give you an edge over the others in the business.

Getting everything right

It is not only about being pixel perfect. It is also about incorporating as few elements as possible while also conveying the wanted message to the visitors. This forces us to get every small element right. You do not want anything to stand out from a negative stand point and you want every element to express something. Every element has its purpose and doing a perfect job means you can’t remove any more element without affecting the site’s goal.

Know your work’s value

By this I mean you should know the work you have done is the best you could come up with. You might meet some clients now and then who, only because there are way too few elements on the layout, are not willing to pay. This is the moment when you will need to explain them why that specific layout is good for them.

Knowing the strong points of your work is a skill you need to learn and designing minimalist layouts will help you achieve it – with a bit of help from difficult clients though. It might not be a skill you will use too often, but it will come in handy in your freelance career for sure.

Bottom line

Only knowing what minimalist design means doesn’t make you a perfect designer, just like only knowing theory doesn’t necessarily mean you can also put everything into practice. In other words, there are some skills which you can get in two ways: the hard way (reading books, spending money on conferences, spending too much time on research) or the easy way (learning by doing).

I have tried this myself and the conclusion is incredible. Learning is way faster when you do it by actually working. By following the advice in this article you will find yourself in the middle of a win-win scenario. You will learn to design better minimalist layouts and will also gain helpful skills for your career.

Until next time! What do you think about the topic discussed here? Do you think it is easier to learn by doing, or in some other way?

February 22 2012

10:00

What is the Trend for Web Design in 2012?

Just a month and a half has passed in 2012 and there are some patterns which are quite easy to notice in how people design. Sure, most of them are similar to the ones of 2011 – it seems 2011 and 2012 will not be too different, however there might be some small changes which I will talk about soon. There is no doubt that screen size is not an issue anymore and designing for all sizes is crucial – this is the stand point of web design trends in 2012.

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of mediaqueri.es.

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

designinfluences.com/fluid960gs/

cssgrid.net/

960.gs/

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

englishworkshop.eu/

kantt.dk/

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

wearepropeople.com/

freshness.hu/

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

February 18 2012

10:00

Why UX Design is like Your Clothes

Even if you gave five people the exact same clothes, none of them would wear the  clothes the exact same way. This is because everybody looks at something in their own unique way, this is just a testament to the creativity every person has inside of them. You’re probably thinking to yourself what in the world does this have to do with UX design, correct?

Well, a website is nothing more than a creatively designed collection of different sections put together to create something aesthetically pleasing. A wardrobe is a collection of different articles of clothing that you put together as fantastic outfits. In short, both are a combination of different items that make a visually pleasing whole. If you’re still a little unsure about this comparison, don’t worry. By the end of this article, everything will make much more sense.

Breaking Things Down First


*Image Credit: hellojenuine

The best, and most practical, thing to always do is to break things down first. So we are first going to relate the basic structure of a website (header, body sections, sidebars, footers, and misc.) to the typical items of clothing one wears everyday. Let’s get started, shall we.

The Header

In any website, there is something about the way the header is designed that decides how well the website as a whole will turn out. If its looks messy, unorganized, wild, and like little thought was put in, the conversion rate for a website with a header like this won’t change at all. It should be pretty obvious where this is heading. In a UX perspective, the header of a website relates directly to ones headwear (which in this discussion can include hair styles).

Everyone has had a bad hair day. Maybe you’re balding or you got a bad haircut and you need to hide it for a while. Well the silver lining to that is the invention of the hat. The proper headgear can make it all better in the blink of an eye.

The Body Sections

Now the body sections of a website are the largest part. This is the area where all the content in a website goes, which is pretty much the whole reason anyone visits a website, at least in an ideal world. Moving on, the body sections connect everything together and the rest of the website is built upon. So with that in mind, the body sections of a website relate to the torso and leg areas. This is like the website version of t-shirts, blouses, tank tops, jeans, skirts, or whatever else is suitable attire for your style and gender.

The Sidebar

The sidebar(s) is the area that sees the most influence from other parts of a website. This is because the size and importance of a sidebar is derived from how the rest of the website is designed. Since the sidebar is the main dependent aspect, and is not always a necessary section but always adds a little something whenever in use, it correlates directly to outerwear(coats, jackets, etc.).

The Footer

There have been studies that show the type of footwear a person wears says a lot about them. The footer and footwear have a stronger relationship than just their names, positioning, and functions. Like the shoes on one’s feet, a footer needs to strong, durable, and stylish all in one. That is a lot of pressure for something at the bottom of a website, but considering that in most cases a footer can make or break a design, it’s quite understandable.

The Miscellaneous (Popups, Overlays, etc.)

The miscellaneous areas of a site are best described as the areas that aren’t really necessary and can hinder the experience of a website if not properly incorporated. However if done correctly, they add to the overall experience of the site. The idea is to keep these unnecessary areas to a minimum and only use them when needed. For this reason, the miscellaneous sections of a website are like jewelry.

In Summary

Since all the sections have been broken down, labeled, and classified, let’s just do a quick review to make sure that everything is understood. The header is the headwear (which for this case includes hair), the body sections are the torso and leg areas (shirts, blouses, sweaters, jeans, skirts, etc.), the sidebar(s)  your outerwear and the footer is the footwear area, and the misc. area is the jewelry.

Deciding Factors


*Image Credit: cmozz

The basic wardrobe structure has been broken down, and the understanding of this relation is pretty much set. There is only one thing missing. What about the deciding factors that determine the wardrobe combination of said broken down sections?

Region

By definition, a region is defined as being an area or division having definable characteristics, but not always fixed boundaries. With this definition in mind, it is safe to say that different industries and/or markets are distinctive clientele regions. Correct? Well for that very reason, the industry (government, education, healthcare, business, etc.) the website one is hired to aid in building will be defined as the region.

Climate

After figuring out the region, there is another important step to take. This of course being finding out the weather of said location. Once the region is identified, finding this out is a breeze. For the most part, every area within a specific region has a general climate characteristic that relates with other areas at all times. Of course there will be slight timely variations for each area, but for the most part what is to be expected can easily be generalized. Isn’t safe to assume that most companies and/or organizations within the same industry will have the same type of content, but with personal variations? For this reason, the content/copy a site showcases is considered the climate.

Applying


*Image Credit: Fuschia Foot

Okay now the relation is understood, the deciding factors are determined, all that is left is to put this new information into practice. To help guide you along applying your new knowledge, take some time to look at this easy to follow example.

Example: The Photographer

So a new client, a freelance wedding photographer, approaches you to design their new portfolio site. From this profession description the deciding factors are quite easy to find. The region in this example is of course weddings, and the climate is wedding photos. Next you need to decide how the design of the website will be handled, or dressed.

Since content wise this site will be nice and breezy, any heavy wardrobe needs shouldn’t be brought here. Below, a sample breakdown is provided:

  • Header: Since the weather is pretty fair, going heavy anywhere on the site is not a priority. All that is required here is a definitive style featuring of course the information we have come to know for a header. This being simply the name/company logo and the navigation menu.
  • Body Sections: It may be good weather, but this area can’t just be blank. This section is reserved for your content of course, things like information about the photographer and photos of their work.
  • Sidebar(s): In this weather situation, adding any extra clothing would just make the wearer uncomfortable if it’s too heavy. So this section is not needed, but can be applied if kept very light.
  • Footer: With everything here going down the minimal path, it only makes sense to continue that here. A strong footer here can include something as simple as a line of bottom links, copyright info, and some social links.
  • Misc.: Although the rest of the clothing currently being worn is leaning toward minimal, a little something extra will really make everything stand out. In this case, things like lightbox overlays in the area showcasing the client’s photos, implementing jQuery to tag the photos by year, part of wedding, and/or angle so that once clicked on only that section shows up, or other things of this nature.

Have any more thoughts? Can the wardrobe strategy you have help?

February 07 2012

14:30

Fact vs. Fiction: What Usability is Not

A close friend asked me a few days ago – “You’ve covered decent ground on the science, dimensions, characteristics, design aspects, process and pervasiveness of usability considerations. How about doing a reverse bit? What usability is not about? Or the myths of usability?” I jumped at the chance.

In choosing to write this, I am simply reinforcing the simple concept that it is also necessary to talk about the “NOT” part in a subject as complex as usability. This shall (I hope!) help in resolving ugly assumptions about the subject and expose more dimensions for discussion. Let’s take a journey of both – popular and unpopular myths of usability. The following are prevailing misconceptions (fast becoming legends!) of usability, in no particular order.

Usability is expensive

It is known that Stanford University, Microsoft, IBM, and many others spend tons of resources (money and human) on usability research, which is quite expensive. But regular and daily usability need not be expensive – thanks to a much evolved ecosystem that allows the science to be applied without having to spend a lot.

I agree that it’s not a commodity – that there’s a price to pay. But from a cost-benefit standpoint, more often than not, usability is not as expensive as it is perceived to be. The major contributor to this misconception is that usability is non-measurable in nature, hence it allows the argument and myth in question.

Usability is free

At the opposite end of the first misconception, a large number of people believe that usability can be free. I’ve seen many people ask suggestions on improving the usability of their site or product – on LinkedIn. There is a regular crowd that asks me personally about giving usability suggestions on their site. Well, for a matter as subjective as usability, the lack of real engagement in this kind of flat question-advice round, makes it even more subjective. Free advice and usability tips are available everywhere, but they’re more like the generic horoscope guidelines and predictions, in my opinion.

Usability is minimalism

The concept of minimalism is usually a nice and welcome change in today’s noisy world. Minimalism is about reducing clutter from your presence, by playing with content, number of pages, element sizes, images, white spaces and navigation. What we need to be aware of is that while usability will almost always get in some minimalism, the reverse is not necessarily true.

Going minimal is not alone going to get you usability. There are many areas of compromise if the distinction between the two is not well understood. Like, having graphic icons/buttons that consume less space instead of textual menus that consume more space. Or trying to fit all content on one screen by adjusting to a very difficult-to-read font size. Different solutions are appropriate at different times.

Usability is user experience

The fundamental difference is “Can easily use” vs. “Want to use”. Let’s take the best possible example here – the usability guru: Jakob Nielsen’s website. Usability guru that he is, his site is very functional and easy to use. But how do you think it scores on user experience? Would visitors love to browse the site for better experience? The answer is NO.

Again, there are some practitioners who believe building a good user experience is all that’s needed for making the site usable. That had led to the myth in question. Superior user experiences have failed miserably in usability, as it’s just one of the dimensions of usability. It is still important to have the right balance.

Usability is all art

Image by MitchellZappa

Art is something that mostly makes sense to the creator alone! Using that as an analogy, I’ve experienced my usability suggestions and advice being alienated to art and abstraction. This myth is more about a mind-block and prejudice than anything else. People think that you need to be an artist or a designer to create usability. Usability does not need artists, it requires fundamentalists and practical observers.

Being an artist can definitely provide an edge of translating the usability practice into a visual design. But otherwise, so much has been institutionalized as a science in the field of usability that companies can do without engaging an artist. However, one point in favor of the myth: There’s no denying that the best usability cases around us did have an art element and that shall continue to be the case. But…

Usability is simplicity

Simplicity is subjective. Even usability is subjective, but simplicity is consciously and directly subjective. Typical end-users are ignorant of technology/design, but they are not dumb. Making it simple is often understood and implemented, sadly, by treating users as dumb consumers.

So, most commonly, you will find people having giant task buttons, heavy label texts, prominent hints on screen, basically, all-important-functions-in-your-face attitude. Your concept of simple may not be so for your audience. This blind simplicity approach does not yield usability mostly, let alone always. Usability will drive simplicity laterally, not literally. Hence the myth is risky.

Usability kills creativity

This is one of the most common misconceptions (also nicely explained on Jakob Nielsen’s website). People think that following formal and scientific process in usability compromises the creative aspects, and leads to a compromised output. We need to appreciate here that the formal techniques, scientific processes are all a framework to guide and engage into usability practice. They are guidelines, not strict rules. Following them as such, you’ll undoubtedly fall prey to losing out on creativity. Following them as guidelines, you’ll get your out-of-the-box element inside your design.

Usability is common sense

The point of argument here is that common sense has a risk of being singular in nature, only with the assumption that it’ll be common to all. Like the famous quote: Common sense is not so common! In the perspective, common sense is merely an opinion at large with weak justifications from a random collection of users or concepts. So, it’s difficult to theorize based on the common sense equation. Very few things can command usability as common to all as a Google’s search. It’s more about amalgamation of varied wisdom and practicing that into your usability design. Naturally, this myth complements myth #2; since usability is perceived as common sense, it can be free.

Usability is good design

Good design (leaving apart the subjective angle) is only an element or output of usability – in practical sense. Otherwise, it’s more like a philosophy. Usability done with a philosophy of good design, would make it effective, error-tolerant, engaging, etc. This part I echo. My argument is towards the literal aspect about the myth, that a good design brings usability. In a way, this has a resemblance to myth #4: usability is User Experience. A good user interface design is not going to save a product if it is not useful or low on performance or erroneous. The usability and acceptance of such products have no connection with the presence or absence of good design.

Usability is about following some rules

Allow me to paint a wider picture here. Millions of books are available, being published and read all the time, that are self-help, how-to-guides, step-by-step. Thousands of blogs and articles teach and preach (including mine, I’m afraid!) about things you assume you’ll be able to learn and apply. That’s a fair assumption, albeit if all the literature is not taken literally. You need to constantly remind yourselves that there are no rules, only guidelines. You need to treat these reference materials as unbiased guidelines that you will taken into account – devising your own framework, your own rule-set, allowing enough flexibility too – if you want to apply consistently. Complex subjects are never mastered with step-by-step-wizard like software installations. Usability is no exception to this.

Usability is a luxury

The myth and the related corollaries that “usability can be done at the end”, “we don’t need usability to survive” can be near fatal, if given into. In today’s competitive times, where switching cost is so low, consumers will not hesitate switching to a more usable product with less features. Consider how DropBox scores over Minus and other similar products – only because they have done a fantastic usability job. DropBox does not even offer maximum storage space for free as others; still it commands the loyalty leading to a market valuation of 5 Billion Dollars!

Usability is fast becoming the key to survival; just that many are not aware of this. If you ignore or take it up as a low priority, the perceived quicker time to market is only going to cause harm. We cannot afford any myths. We need to be embracing reality and changing business and user needs; we need to be more agile to these demands, and from a product/website perspective, we need a more conscious effort on usability. It will enable marketing and empower sales. You will find this element common to all the successes in the world, and also find this element missing from all the failures in the world. And that’s not a myth!

Related Resources


Tags: Blog Usability

January 12 2012

10:00

How to Make the Best out of the Fold

The fold, also known as the scroll, is the position on a web site where the browsers will begin to scroll down. Elements that can’t be seen without scrolling down are “below the fold” and some people believe that it is smart to keep the important information above the fold and don’t force the user to scroll down to view it. The whole space below the fold is for less important information and, depending on the resolution of the screen, this can be at around 600 pixels down on a 1024 x 768 screen, 850 pixels down on a 1200 x 1024 screen and around 1030 pixels down on a big 1600 x 1200 screen.

The term of “above the fold” comes from the newspaper industry and is used today for both papers and websites. For example, most papers are delivered or displayed folded up, meaning that only the top half of the front page is visible at a first glance – therefore the most important information has to be placed above the fold. Advertisers also prefer the visible part of a newspaper or web page, therefore an advertiser will pay much less for an ad space in the footer than in the header. However, in this era of small mobile screens, many experts suggest that the term is vague and not very important anymore – some call it a myth, a rule that kills innovation, a false concept used by people who don’t know what they’re talking about and so on- so today we will take a look at some arguments and try to make our own decision.

Does the fold really exist?


Well yes, it seems it does, because many people know about it and it is taken into consideration by designers, both for online and offline work. There is a clear advantage of being visible on top of the page, no doubt about it. There is also an advantage of being visible at a quick glance. And it is also rather normal to pay more for an ad box there. There are books and design cases written about the fold, so there must be something to it.

What is interesting about the fold is the fact that users have lots of different screen sizes and the visible content is not the same on every computer. This makes the job harder for a designer or developer, because if an advertiser pays for a spot above the fold, this might be difficult to make for small screen sizes if the design does not allow for it.

So yes, the fold exists and it was a problem a few years ago (more about this right away), but I am wondering if we should still pay attention to it, in the conditions we have today, when small screen sizes – mobile devices, tablets – have taken over computers with big screens.

Where does the concept come from?


Well, if we take a look 16 years back, we can find research by Jakob Nielsen (source) which says that only 10% of his test participants scrolled during normal browsing. Sure, that was back in the beginning of the 90s, while in 1997 his new usability test showed that users learned to scroll, but it still reduces usability. In 2010 he did a follow-up and presented totally different data, such as people spending around 80% over the fold, while attention to content under the fold dramatically decreased.

We’ve heard about the fold from ClickTale as well, which published a study six years ago, finding out that 91% of the users have a scrollbar and only 75% of them scrolled. Only 22% of them scrolled to the bottom of the page, which explains why an advertising space in the footer is not so expensive compared to the space on top.

Example of eye tracking on a Google page

The same company followed up with a study one year later and showed results through eye tracking and mouse heatmaps analysis that made clear the following: the top and bottom content are in focus, while the attention dropped somewhere in between. This means the header and footer are the most important parts of a website, although the header was 17 times more likely to be seen by all visitors than the footer.

In the same year of 2007, a spectacular article by Milissa Tarquini (source) was released and revealed that people actually scroll down and not only view, but also interact with the bottom of a page, unlike what the other studies showed.

What about advertising?


The content is the most important part of a web site, but today there are examples of successful web pages with not a lot of it, but with lots of advertising. Money rules the world today so advertisers actions have to be considered in this controversy. As mentioned several times before, the prices for advertising space differs from site to site, but moreso from position to position.

Chitika has a very interesting point of view, based on different tests, which say that from over 22 million impressions analyzed, ads placed over the fold have a 44% higher click rate than those placed below. But as said before, this is very difficult to control because of the many different screen sizes – what’s high above your fold could be under the fold of your teacher’s screen.

A more in-depth analysis was made by Casal Media. Two billion impressions were followed (source) and this showed that ads placed over the fold are seven times more likely to be clicked, while MarketingSherpa’s study showed that ads below the fold were not even noticed by 75% of the visitors.

When talking about advertising in particular, the results are clear: what is placed over the fold is more visible and has a higher click rate than what is placed below – but really, didn’t you expect this? We didn’t need studies that cost, probably, tens of thousands of dollars to tell us that. We knew it anyway and the proof is that everybody knows the prices in advertising – or, at least, the approximate fees for every single section.

So there is a problem…


Well yes, after reading the first part of the article it seems there is – and I totally agree with this fact. Everybody ignoring this obvious issue “doesn’t know internet“, so to speak.

The problem comes from people in the business such as project managers, developers or even clients who don’t want to make critical mistakes on their web pages, like placing the advertising space somewhere not profitable or visible. Some of them go so far that they want everything important above the 600 pixel mark (they heard somewhere this is the common line of the fold) and this annoys designers and developers, because not only there is no default line, but it all depends on the screen and it is purely impossible to make it work on all the sizes and resolutions. Even though the width can be set to 100% and be flexible, the height is not as easy to manipulate. And even if we manage to, the problem would be the same, because the content will be extended horizontally instead of vertically and we will still have a fold, only a different type.

The place below the fold is not No Man’s Land, unlike what many business executives think. Usability tests show that there is nothing wrong with the content below the fold, because most of the sites have a scroll bar today and the user is educated to scroll down. Placing advertising there is no problem either. They still have a conversion rate, a click rate and you can still make money.

And if there is a problem, how do we solve it?


Well, there is no real perfect solution, so I will have to throw some ideas out there, but with some things to take into account. We can’t control how the user accesses and views our webpage, therefore we have to focus on improving the things we can control. Keep in mind that if you are not too interested in this subject, you don’t need to change anything in the way you design, but if you’ve already read this far, it’s very likely that you’re looking for some answers. So, here you go…

  • Design intelligently

It is not very smart to lead the user into thinking the site finishes where the content box ends, like many designs do today by using a bottom border. Many users think the site ends right after the content and do not even see the footer anymore because of this – you want to avoid this.

It’s difficult to make a website work for more resolutions and designing for the majority is not a solution either. Even though the browser statistics show 1280 x 1024 and 1280 x 800 as the most popular displays, this is a total of less than 30% of the internet users. What about the rest? Try to use design techniques that are common to different displays at the same time (such as flexible width). You need to provide the same experience to all the users, regardless of their screen resolution.

  • Focus on content

As said before, the most important thing on a web page is still the content, therefore it’s the first element you should think about. People don’t look for advertising first, but for content that seems relevant to their interests at the moment. It they are interested in the content, they will have no problem scrolling down below the fold, so don’t worry about it too much if you know users come to your webpage for content. If you have a high return rate of visitors (check it with Google Analytics), they definitely come back for content, so you are on the right track – don’t worry about the fold. Just continue doing what you do and this problem will never be something you have to think about.

One of the few issues that might appear for you, however, is the fact that the scrollbars are decreasing as indicators. Apple’s new OS X Lion doesn’t feature a visible scrollbar by default, although you can make it visible by changing your options. This happens because of the mobile approach and Apple’s interface is already beginning to shift gears in this matter.

  • Think about what’s on top

“With great power comes great responsibility” is a well-known quote from a huge American writer. With the power you have as a designer, you have a great responsibility of designing things right. You need to spend a lot of time thinking about what is worthy enough of being on top. This takes a lot of time and research, but it will pay off in the end. Also, think of the advertising spaces you want to have and position them strategically.

In my opinion the beginning of the content has to always be over the fold. When you design, test on small screens and check if the beginning of the content is visible. Otherwise, go back in the code and make it visible. If the content (which is the most attractive element on a web page) is not visible, how do you expect to keep the attention of those 25% of the people in ClickTale’s research that do not scroll at all?

Conclusion


So yes, the fold exists even though many people deny it; and the fold is a problem as well, but only if you make it one. There are designers out there who don’t care about it and they still earn money and provide good results. But if you think of the fold too much, then I hope the tips above will help you get over it. It is really not that big of a deal if you don’t turn it into one.

What do you think about the fold? Have you ever encountered a client who cluttered the top of the site only because of the scroll? Is the fold bothering you and if it is, how do you avoid it?

January 03 2012

10:00

How To Create An Effective FAQ For Your Website

Frequently Asked Questions is a good section to have in your website. They give users a chance to figure out things by themselves instead of wasting resources (both yours and theirs) with a 1-to-1 conversation (chat, Skype, messenger and so on).

But FAQ’s are a different type of content. Just like search and sitemap, it has its own particularities and things that you can do to improve user experience. You have to keep in mind, for instance, that users don’t go to FAQ pages, you have to lead them there.

Here we’ll see a couple of thoughts about it, good practices, inspiration and tools.

So, let’s rock!

7 check points


1. Keywords

Ok, first thing you need to keep in mind: Users don’t read on the web. They scan the page trying to find main keywords about something that may be important to them (just like 90% of you are doing right now). So use good headlines and questions keywords, avoid clichés and keep them short.

If you can, outline main keywords, like searched terms, or main topics.

2. FAQ or WAQ?

For a long time FAQs have been misused, instead of real and relevant content, companies put questions they “wished” users would ask (WAQ, Wished to be Asked Questions).

It’s very important to put users needs first, just cover topics that are really important to them. Otherwise it’ll be just another page trying to hide the solution from them. Which, by the way, won’t solve the problem at all, leading to future problems, like unnecessary support requests, or lost sales.

3. People don’t go to FAQ pages

People don’t go looking for FAQs. It’s not a common workflow thinking “Hey, I need to know about their refund policy.. Let’s go to FAQ”. Sounds strange, huh?

So you have to interlink it wisely in places where users may need help. Like using them along with search pages. Or using them as a “wall” before chat with real attendants: Ask the user what kind of problem they have, then suggest a few FAQ searched items based on the users keywords.

4. Sometimes you don’t need to lead them to FAQ, just use tooltips instead

FAQ are great to provide complete answers, but if you just want to tell users how features work, or which type of data they should put in a registration form just go with tooltips or something like that.

Oh, and don’t forget to make it easy and mobile friendly, or in other words, don’t use just a simple hovering element or title attribute. You may use a plugin or add it as a plain text right above your field or button.

5. Do you really need an FAQ?

I know I’m saying that it’s important, but it has its place in websites. It’s a good idea for sales websites, services, apps… But if you have a simple blog or simple company website, just create an “about” page and you’ll be fine.

6. SEO

Have you ever thought about it? If you have a single page with good keyword density about your product and link it in several places inside your website, it can be a really good landing page.

So, think carefully about it, it may lead a lot of users to your website.

7. KISS

Again, Keep It Simple, Stupid my friend .You don’t need to clarify every single question that may pop up about your product. You may categorize questions (if you have a huge amount of them), show content just when users need it.

Just keep in mind that landing page idea, you have to talk about the most main topics and solve users problems fast, if not they will just leave website.

Implementation tips


jQuery / Javascript enhancements

Like I said above, you may hide content by default and just show it when a user wants/requires it. You can use, for instance, jQuey Collapsible panels plugin and create dynamically collapsible panels. You can also use jQuery accordion plugins.

Another good thing to do, is add a “Table of contents” with smooth scrolling, so users can reach what they want easily and with a pretty cool effect.

Scrolling like a boss

You may use smooth scrolling scripts or something like LocalScroll so you’ll get a better organized and easier to use FAQ page.

How about reading a tutorial on it?

Well, Matthew Corner wrote a tutorial with smooth scrolling, table of contents and good looking, and you can just download and edit it to better fit your needs.

Doing the right markup

Although many people use simple headings (h2,h3) for questions and paragraphs for answers, I think that it’s much more semantically correct using definition lists for them. So you may use definition title(s) and definition description(s) to wrap them up accordingly.

Another option, really good one actually, is to use the <details> HTML5 element, which gives you those good looking collapsible panels by default (with browsers that support it, of course).

Nice examples out there


Search + FAQ

Paypal uses a really good system where users can see their FAQ or search by keywords, as well.

FAQ preventing unnecessary support

It pretty common to have users asking you really dumb questions. Don’t get me wrong, but sometimes they could easily find the answer themselves, if we gave them a chance.

Doing the easy way

Did you know that we have a tool for FAQ development? Pretty cool, huh? It’s called FAQme, and worth trying!

FAQ, the Social Way

If you’re more of a social company, why not use a tool that integrates questions and people? Well, I’ve seen a couple of (young) companies using FormSpring as a simple way to answer real questions and let them be easily accessed by other clients

December 26 2011

10:00

10 Crimes a Web Designer can Commit on Call to Action Pages

Call-to-action pages are dedicated to prompt visitors to take a desired action, whether an opt-in, a sale or any type of click that brings a user one step closer to a company’s goal. Basically, any website can be classified as a call to action page because virtually every person who creates a website has a specific action he/she wants a visitor to take.

Most websites commit at least one of the top crimes listed below. Do you agree with the choices?

1. Graphic Clutter


Graphic-Clutter-Worst-Call-to-Action-Pages

It’s obvious this website’s purpose was show as much information to visitors as possible above the fold. While this is a valiant effort, too many graphics can work against you.

A great call to action page will send your eye to a specific area. When you look at this page, your eyes are drawn everywhere and if you were looking for a car, you wouldn’t even know where to begin.

Though this page is not a landing page, it is a prime example of why less is more when trying to increase conversions with web page design. A call to action page should include benefits, features, logos, maybe one or two images and a prominent call to action button. Any more and the page will suffer.

A website home page should follow suit while including clear navigation and an easy experience for visitors. Avoid clutter at all costs. White space is your friend!

2. Blended Call to Action


Blended-Call-to-Action-Worst-Call-to-Action-Pages

Though the call to action button on this page is outlined in yellow, it does not stand out enough from the background. The yellow also matches the font above it so it blends into the background even more. The color scheme of the page is yellow, red and orange and the call to action button follows the same color scheme; therefore, it does not stand out enough. A solid color in contrast to the page would work best.

3. Distracting Background


Distracting-Background-Worst-Call-to-Action-Pages

Many businesses want to incorporate their brand colors into their website design. While this is a smart marketing strategy, if the color is overdone or distracting, it can have an adverse effect. The bright yellow background in this web page is very distracting and it draws the eye away from the purpose of the website. If you view this website in its normal size, you will see how truly distracting the bright yellow background is.

It’s good to implement your brand colors in your website design, but not at the expense of distracting visitors away from your purpose. Your background should support your web page and be somewhat neutral.

4. Lost call to action


Lost-Call-to-Action-Worst-Call-to-Action-Pages

On this page, the call to action button is not only lost, it is nonexistent. One of this website’s desired actions is to urge users to click and find out more information about the Thank You® Premier card. The current call to action is simply text that says “Get Moving”.

If you really want to lead users to an intended action, use buttons in contrasting colors. Text will never be strong enough to get users’ attention. The button should include a contrasted color that screams “click me” without slamming it in user’s faces.

Also consider the call to action button’s proximity to other elements. For example, with an ecommerce site, the “Add to cart” button would be most effective if it were placed right next to the product. You can also place call to action buttons near places of interest like testimonials, feature lists and benefits, etc. Make sure, though, not to clutter your page with too many buttons. Keep them close to your key points and at a  maximum of 2-3 per page for simple landing pages.

5. Too Much Information


Too-Much-Information-Worst-Call-to-Action-Pages

When people offer us more information than we want to hear we often say it is TMI or Too Much Information. Similar to how you would want that person to be quiet, a web page will suffer this same reproach if it is suffering from TMI.

On this example web page, the call to action is not front and center and your eye is drawn to the articles instead of the “Get a Quote” text. This page, while meant to attract visitors to get a quote, leads them towards reading an article which may be too much information for this page. Content is not necessarily bad; great content outlines the pages of some of the greatest websites. But when it blurs the message of the site or distracts users from a clear call to action, profits will suffer.

For this website, a more prominent call to action in a more effective location would draw the eye there first.

The goal with a call to action page is to lead your visitors to click on the call to action button without distracting or boring them with too much information. You should include enough information (features, benefits, guarantees, testimonies) to lead them to take action without overdoing it. If your visitors cannot figure out whether or not your site will be beneficial to them in the first few seconds, they will assume the worst and hightail out of there.

6. Too many Links


Too-Many-Links-Worst-Call-to-Action-Pages

This page is actually ranking quite well for competitive mortgage related keywords, but the design of the site unfortunately does not follow suit.

Unless your site is product specific (e-commerce) or purely informational, excessive text links can overwhelm users.

The purpose of this website is to guide consumers to get a mortgage quote. While classifying the links by states is a good idea, the clutter and small font does nothing for visitors’ eyeballs. As stated before, text links are ineffective as calls to action on pages like these and the close proximity of these links jumbles everything together to look like one cohesive blue link.

There is no clear call to action here. This webmaster would benefit from making this page a second page and redesigning the home page to include one or two buttons only, leading people to “Get a Quote”.

Here is a trick: Squint your eyes slightly to blur your vision and look at the page. If your call to action doesn’t stand out, adjustments may need to be made.

7. Button Placement & Location


Button-Placement-Location-Worst-Call-to-Action-Pages

Though this website is committing many faux pas, I chose it due to improper placement of the call to action button.

If you look on the far right (it probably took you a few seconds to find it, which is a few seconds too long), you will find a small box with a dropdown menu. This is where the webmaster would like a user to click. The only element standing out is the small red arrow and that is even questionable.

The placement and location of your call to action button is equally as important as its size and color. A great call to action will not be effective if it is surrounded by too much text or not enough whitespace, or if it is located out of sight.

Generally, it’s important to keep call to action buttons above the fold (visitors can see it without scrolling), clearly visible and prominent in relation to all other elements. If you have content that is only visible by scrolling, include a call to action button towards the end so users do not have to scroll back up to click on it.

8. Button Size


Button-Size-Worst-Call-to-Action-Pages

Your website visitors should know exactly where they need to go the second they land on your website. In this example, though well-designed, this “Buy Now” call to action button seems a bit small for the animation of the site. If you click on the entire website, you will notice a busy background which can distract from the small button as well.

Please note, though, that a bigger button is not always associated with higher conversions. The button should stand out from the other design elements without overwhelming the entire design, which can turn people away as well.

9. Button Text


Button-Text-Worst-Call-to-Action-Pages

This website used the word “Go” to urge users to click for a quote. While the design does draw your eye to the quote box, I am not sure the word “Go” is the best choice.

Though there are some basic rules for button text to maximize conversions, it is more of a function of the type of website rather than a general consensus. For example, a business offering a free trial may use “Click Here to Get Your Free Trial” while a service-oriented website may use “Get Started Today”.

General rules of thumb for call to action button text:

  • Avoid being too wordy
  • Keep it simple
  • Add urgency
  • Limited availability if applicable
  • Use action words like “now” or “today”
  • Always split test

When it comes to elements such as button text, the only way to determine what works best is to split test. Sometimes, minor changes can increase conversion rates dramatically.

10. No Clear Message


No-Clear-Message-Worst-Call-to-Action-Pages

Many businesses are not clear on their sales funnel; therefore, their visitors are not led to take a desired action. This dealership is trying to push users to perform too many actions at once along with reading text which can be boring for people looking to buy or lease a car.

TIP: The purpose of your call to action is to get users to the next step only. In the case of the dealership, the final goal would be to sell a car, but that should not be the main goal of the website. That is the car salesperson’s job. The website should only urge visitors to take the next step which is to visit the dealership.

Don’t try to sell a car with your website. Just sell the next step!

Have you seen any call to action crimes? What call-to-action crimes have you committed?

December 23 2011

10:00

Future Of Interface Design – Touchscreen Or The Legacy Grandpa Style

My grandpa, somehow, still prefers raw milk (which includes milking the cow himself) over pasteurized milk. He advocates that “the human race existed long before pasteurized milk was heard of.” I won’t be discussing the benefits of pasteurized milk, but I wanted to shed some light on human nature which finds it hard to shed its old skin in order to wear the better one. He does drink pasteurized milk daily as we don’t have cows in our backyard yet he continues to rant about his good old days of raw milk. Somehow, I found Bret Victor’s view on Interaction Design almost related to my grandpa’s situation. It was more of a love to hate you situation.

Why the Rant?


Well, Interaction Design has been around for quite some time but it was Microsoft’s Vision of Tomorrow that gave the term its necessary fame. I am not sure if we can call it a vision or stupidity but it surely was interesting. Since then Interaction Design has faced many critics, some of those actually ripped apart the actual vision itself. I won’t count Bret Victor in the category of critics who rip apart the concept of Interaction Design, but he was quite close. Before we move on, I want you to get the feel of Interaction Design. See the video below:

To summarize Victor’s article, if Interaction Design was to be our future then the nerves on our finger tips will become jobless. Yeah, he did a great job of explaining how we forget that it is a work of art when we can use our hands turn a page of the book and remind our brain that we actually turned two pages instead of one. Its art when you drink water, pick a bag, use a phone and all those other daily tasks. True. But does that mean we give up on technology that makes our life overly easy just because we want to feel the number of pages we flipped? I mean, come on, isn’t that old school? If that was the case, why did the world go mad for the iPad? Just because it was Steve’s vision? No. Really. It is because they love the ease of use. Get it?

Let me quote a comment from Reddit to support my thought:

Hands are so yesteryear. The future in interaction is through voice and mind. Hands are just an intermediary between your mind and the outside world. As the author of the article said, without feeling you’re paralyzed in a wheelchair solving quantum mechanics problems but YOU’RE STILL WORKING AND INTERACTING BECAUSE OF YOUR BRAIN!!

The future of human interaction is for technology to try and figure out what you actually want to do as opposed to what you can just figure out how to do by sliding your finger around on a device. This is where stuff like Siri comes in. Google has been working on this for years as well.

The author himself has a woefully outdated vision of future interfaces, since future interfaces will be no interface at all. You’ll just speak to a machine or plug in and it will give you what you’re looking for without figuring out where some UI menu is.

Why it isn’t about touch only


You know, I still prefer a BlackBerry Bold over an iPhone just because the Bold has a physical keypad and my work involves a lot of writing. My typing speed somehow decreases if it is a touch phone though the difference has started to blur. I know that someday I will move on towards the iPhone because of its rich features. The Bold does lag behind and we all are aware of this fact. But, the point is I don’t use the BlackBerry keypad due to the touchy feel of it. It is just that, for now, I feel that it is comfortable to type using a real keypad instead of a touchscreen keypad. Moreover, I know that tomorrow I will not think like this. The transition has to occur because it is for good only.

What Victor forgot was the added features that come with Interaction Design. See how the lady has been introduced with the place of her next day’s meeting? I’ll love it when Interaction Design Technology introduces me to the hotel building where I will be enjoying my honeymoon in a matter of few minutes. Will it be different? The vision of my destination itself? I agree that my hands won’t be able to tell me about the fact that I flipped three pages instead of one, but the technology will, so why care so much? Interaction Design Technology isn’t kicking away the prospects of human-to-human touch anyways. It is just feeding on our thirst for comfort and pushing it to the next level.

Here is another situation. The guy in the picture never had to open the refrigerator to find out what was in there. He saved a few seconds and didn’t even transfer the few thousand germs that his finger tips were carrying. Isn’t that interesting? Why taste milk to see if it is still good? I would rather let the technology tell me the same. If our technology can be as good as that then what is the problem with merging the same with Interaction Design?

Those are just two examples of what Interaction Design can do for us in future. I agree that we will lose the real-touch feeling when such tools take control of our lives, but that will be for the best (most of the times.)

Another comment on Reddit hails my thoughts:

While the author is right that these interfaces may not be truly revolutionary objects, he kind of misses the point. The real revolution of many of these future videos is that computing will become ubiquitous and interconnected. It’s not just that I have a fancy phone, but that my phone talks to the arrival gate kiosk so it knows I am at the airport and can automatically hail me a cab. The cab itself has a computer and display mounted into the windows that talks to my phone and can point out my local destinations as I drive by. While we are making small strides towards realizing these goals, the vision is that all of this will be seamless and effortless. The idea is not to create a novel vision of the computer, but instead create a vision of how we will do computing.

Far-Fetched Alternatives


Remember Iron Man? District 9? What do these two movies have in common? My God, did you just say “the iron suits”? Please! I was pointing towards the 3D style of computing which was used in both these Hollywood flicks. Of course they are far from real but isn’t almost everything that we discussed above also far-from-real? Still, the buzz is with these ideas. Then, why not the ideas that were pictured in Iron Man? Touch. Feel. Play…live inside the system. It is about how close these machines come to reality and now far we go with our imagination. Also, an Iron Man-like display will surely help Victor reconsider his rants against the loss-of-touch-styled-interactive-designs!

Lastly, this write-up wouldn’t be complete without the mention of Apple’s overrated Siri. I agree that Siri could well be the first step towards Artificial Intelligence but that will be it. There is a lot to come in terms of Artificial Intelligence and I would love to live till the times when an Iron Man-like Artificial Intelligence becomes part of my daily life. God, are you listening?

Conclusion


Well, the topic of this debate is neverending still I think the end result is more or less clear already. We will be moving towards Interaction Design Technology at some point of the time. Time will tell if humans are able to gel with it or continue to criticize the losings of human touch. See, I am not against the idea of human touch. I will still want to feel my mom’s hand instead of touching it over a glass screen but that doesn’t mean that I don’t want an iPad like technology in my kitchen via which my mom helps me cook my dinner. It is fun and it is almost real. Agree with me? I hope my grandpa agrees with my thoughts!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl