All posts tagged “Quick”

How to Create Icon Fonts. Quick Start Guide

What makes icon fonts so popular? How to create icon fonts and use these in your works? Check out the quick start guide to find answers to these questions.

Improving Design With Quick Usability Tests

To see how users behave in a natural environment, it helps to use remote usability software to record the screens and the voices of test participants. This lets you hear them thinking out loud and see every click.

While focus groups and field studies help you understand user opinions and natural product use, remote recorded tests let you see reactions and hear the thoughts of users as they focus on specific tasks. To demonstrate how to run quick usability tests as part of a design process, we ran a few unmoderated tests and redesigned the Yelp website accordingly.

Regardless of the method you choose, just remember that user research is not about writing reports — it’s about asking and answering the right questions and gathering data so that you can make evidence-based decisions in your designs.

Choosing User Demographics

As described in The Guide to Usability Testing, in order to set up your user tests, one of your first steps is determining who the target audience should be for the purpose of the study.

Image Source: The Role of UX Research.

From the perspective of a company with a very large user base (138 million unique monthly visitors, according to Yelp’s Q2 2014 numbers), it is very important for the redesigned website to still be usable by the average current user. Yelp certainly would not want to alienate its existing readers in favor of an improved onboarding experience for first-time users.

So, for this study, we were primarily interested in observing current, semi-frequent Yelp users, rather than brand new users. We also chose not to focus on power users (those who use Yelp every day), because their experience would not be representative of the middle-of-the-road, occasional user.


We chose not to focus on age, gender, income level, or experience using the web since Yelp users come from all backgrounds. Since this study was purely for
qualitative analysis, we did not need statistical significance to validate our findings. We followed industry best practices and ran our study with a total of 5 users (according to Nielsen Norman Group, a sample of 5 users will uncover 85% of a site’s problems).

One of the tasks in our test required users to log in to an account. Since our test participants were not new users, however, we were not interested in testing account creation. We were slightly concerned that users who had an account would be more likely to be power users, so we decided to test with two segments: one with Yelp accounts (3 users), and one without (2 users). For the segment with Yelp accounts, we only selected participants who had been Yelp users for less than 6 months to further eliminate the likelihood that they would be power users.

Lastly, for simplicity’s sake in our design sprint, we only tested Yelp’s website on desktop, not on mobile. If this had been more than an exercise in design, we would have tested the experience on smartphone and tablet as well to make sure we addressed any problems that users encountered on mobile devices.

As shown in the free e-book User Testing & Design, Here are the exact demographic requirements and screener questions that we used:

Test Details: Group 1 (Yelp account holders)

  • User requirements: 3 users
  • Any age, any income level
  • Any gender
  • Any web experience
  • Device: desktop computer
  • Located in U.S.
  • How often do you use Yelp?
    • Every day
    • 3-4x a week
    • 1-2x a week
    • 1-2x a month
    • a few times a year
  • How long have you been using Yelp?
    • Less than 6 months
    • 6 months – 1 year
    • More than a year
  • Do you have a Yelp account?
    • Yes
    • No

Test Details: Group 2 (Not account holders)

  • User requirements: 2 users
  • Any age, any income level
  • Any gender
  • Any web experience
  • Device: desktop computer
  • Located in U.S.
  • How often do you use Yelp?
    • Every day
    • 3-4x a week
    • 1-2x a week
    • 1-2x a month
    • a few times a year
  • How long have you been using Yelp?
    • Less than 6 months
    • 6 months – 1 year
    • More than a year
  • Do you have a Yelp account?
    • Yes
    • No

Determining Test Objectives and Assigning Tasks

Any good research plan should begin with the question, “What are we hoping to learn?

In our case, our objectives were to learn how semi-frequent Yelp users go about completing several very common tasks (to see what features were most important), and at least one not-so-common task (to see if they knew how to use a more advanced feature).

We assigned all users the following common tasks:

  • Focused task — Find a business based on very specific parameters.
  • Open-ended task — Find a business without being given very many guidelines.
  • Highly specific task — Look up a specific location to learn a specific piece of information.

We wanted to learn when both user groups chose to search versus browse, how they interacted with filters, and how they made a decision about which business to go to.

As for the less common tasks, we provided a different task for each user group. Since we had heard several anecdotal complaints from registered Yelp users about Bookmark and Lists features, we asked registered users (Group 1) to complete the less-common task of saving businesses for later reference.

For users without accounts (Group 2), we chose a less-common task that did not require an account: finding an event. We wanted to see if these users would search or browse the site, and how they would make a decision about which event to attend.

Below, you’ll find detailed explanations of the common and less-common tasks that we assigned to each group of users. After each task, we asked test participants if they were able to complete the task successfully and the level of ease or difficulty of completion.

Tasks: Group 1 (Yelp Account Holders):

  1. Imagine you need to reserve a private dining space for a group of 15 people. You are looking for an Italian restaurant with a classy ambiance. Your budget is about $ 20 per person. Try to find a restaurant near you that matches all of these needs.
  2. Imagine your best friend is having a birthday soon, and you’ll be planning a party. Find 10 bars or lounges near where you live that you would be curious to look into later for the party. Save them so that you can easily find them again on Yelp.
  3. Imagine you are driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Use Yelp to find out if they are open at 8:00 pm on Tuesday.
  4. >Go to the place where you saved the 10 bars for your best friend’s party. Keeping his or her tastes in mind, choose one that would be a good match.

Tasks: Group 2 (Not Account Holders):

  1. Use Yelp to find a new restaurant near you that you haven’t been to yet. Spend no more than 5 minutes looking.
  2. Imagine you need to reserve a private dining space for a group of 15 people. You are looking for an Italian restaurant with a classy ambiance. Your budget is about $ 20 per person. Try to find a restaurant near you that matches all of these needs.
  3. Imagine you are looking for something fun and unique to do in your neighborhood this weekend. Try to find a concert, play, or other event using Yelp.
  4. Imagine you are driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Find out if they are open at 8:00 pm on Tuesday.

Once we had selected our test participants and written our test questions, we launched the user tests. Our video results came back within about an hour, and we got ready to watch and analyze them within the UserTesting dashboard.

Analyzing Usability Testing Results

To gather qualitative data, we ran a remote usability test with 5 users via UserTesting. To gather quantitative data, we tested ~30 users with a closed card sort (which shows how you can restructure your IA to match people’s thinking processes) and a first-click test (which shows what site element makes the strongest first impression). You can learn more about the quantitative user tasks, but we’ll just summarize the top insights from both tests:

  • The Search bar was the starting point for almost all tasks. It was also the preferred backup option when users weren’t sure how to interact with the site UI (e.g. searching for “Bars” instead of clicking the category). Our redesign definitely needed to prioritize the Search bar.
  • The Events tab wasn’t noticeable. When asked to find an interesting activity, one user went to the Search bar while the other navigated through the Best of Yelp section. If we wanted users to actually interact with the Events feature on Yelp, we would need to make it easier to find.
  • The price categories weren’t clear. When given a budget to find a restaurant, some useres weren’t sure what the dollar signs meant. In our new design, we added price ranges to the symbols.
  • The filters aren’t prioritized correctly. People didn’t use 7 of Yelp’s 47 filters, and the most popular filters that arose in testing (such as “Accepts Credit Cards” and “Open Now”) take several clicks to access. Our redesign reorganizes filters into clusters of 4 for easier access.
  • Photos are a key part of the experience. When asked to find restaurants with a certain ambiance, users relied on photos the most. Our redesign makes Yelp more visual.
  • Bookmarking needs to be simpler. Currently, you can’t just save a restaurant or business straight from the search results — you need to visit each individual page to bookmark them. Our redesign lets you save a business with one click on the search results page.

To see how we incorporated all 7 usability testing insights, you can play with the low fidelity Yelp prototype, and check out the final high-fidelity prototype.

In case you’d like to use these tools to support your design decisions, all 3 companies are running a bundle deal until 12.22.14. Save up to $ 1132 on user-centered design tools.

To learn more about how to incorporate cost-efficient usability testing into your designs, check out the free e-book User Testing & Design. We’ve included 109 pages of screenshots and tips, using the Yelp redesign exercise as an example.

The post Improving Design With Quick Usability Tests appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

Cool Hunting Holiday Gift Guides 2014: A quick look at the four tailored guides designed to help you find the perfect present for your creative friends and family this season

Cool Hunting Holiday Gift Guides 2014

For the 2014 holiday season, Cool Hunting worked with several like-minded purveyors to create four gift guides tailored to a range of tastes. You can find these in our newly redesigned Buy section, which serves as a continuously updated, perennial……

Continue Reading…

Cool Hunting

How to Enable CSS Transform in IE6-8 [Quick Tip]

Modern browsers have a lot of support for most CSS3 properties. You can essentially apply CSS animations, transformations and gradients among other things with ease. However, there are still many users of older versions of Internet Explorer versions that don’t exactly support the newer CSS3 properties. In this article, I will share quick tips how to enable CSS transform on IE6-8.

The CSS Transform property allow us to transform an element in two-dimensional or three-dimensional space. You can translate, scale, rotate and skew an element using CSS Transform. For modern browsers like Firefox, Opera and Webkit based browser support CSS Transform with their vendor-specific prefixes (using -moz-transform, -o-transform and -webkit-transform respectively), but you will not find it on Internet Explorer. So herein, I will use javascript library called cssSandpaper that allows cross browser CSS Transforms, even in old IE.

Getting Started

First, download cssSandpaper from the Github Repository. Then, include the following required JavaScript libraries which comes with cssSandpaper.

 <script type="text/javascript" src="/path/to/js/EventHelpers.js"></script> <script type="text/javascript" src="/path/to/js/cssQuery-p.js"></script> <script type="text/javascript" src="/path/to/js/"></script> <script type="text/javascript" src="/path/to/js/cssSandpaper.js"></script> 

The -sand-transform Property

cssSandpaper introduces a new prefixed property to apply the transformation. This new property can be used in conjunction with the other browser vendor prefixes like -moz-transform, -webkit-transform, or other browser prefixed properties, like so:

 #container { -moz-transform: <function-list>; -webkit-transfrom: <function-list>; -sand-transform: <function-list>; transform: <function-list>; } 

The cssSandpaper inherits the standard CSS functions to perform the transformation such as rotation and scaling. The following is a list of the functions you can use within the -sand-transform property.

  • rotate(angle) is used to rotate an element in degrees or radians. e.g: -sand-transform: rotate(45deg)
  • scale(sx[, sy]) is used to scale an element. e.g: -sand-transform: scale(1[,2]) this means we scale the element on the X-axis according to the original size and on the Y-axis as twice the original size.
  • skewX(ax) and skewY(ay) are used to skew an element around the x and y axes by the specified angles in degrees or radian. e.g: skewX(30deg)
  • matrix(a, c, b, d, tx, ty) is used to make 2D transformation matrix comprised of the specified six values.

Use Example

Assuming we have built a box using a <div>. And now you want the box to move 200px horizontally away from its initial position, and at the same time rotate it for 45 degrees. You can use cssSandpaper to achieve this effect, as follows:

 #box{ width: 150px; height: 100px; -sand-transform: translate(200px, 0) rotate(45deg); } 

You can see the demo below. Do take note that you should look at it in Internet Explorer 6-8 as well.


This might not be the most elegant solution as we need to stack a bunch of JavaScript libraries to achieve this simple effect. But in case your boss or client insists on enabling rotation in Internet Explorer 8 (for whatever nonsensical reason), you can use cssSandpaper to make this happen.

A Quick Look at the Ghost Button

Every year various design trends fade in and out of the community. In 2014, one of the dominant design trends to pass through the web design world has been the Ghost Button. To understand the Ghost Button, we must firstly go over the Ghost Button itself, where this trend originated from, what are some of the pros and cons, and also view some examples.

Let’s get crackin’.

The Ghost Button

The Ghost Button is very easy to identify and have been increasingly cropping up in the last 10 months or so. In all occasions, the Ghost Button is transparent and empty. They seldom have color other than white and typically placed on a picture background or hero image. They most often appear as Call to Action (CTA) buttons and offer a clean look. They are often paired with a cleanly designed website and compliment the overall clean aesthetic of the layout. Some other design elements of a Ghost Button are:

  • Surrounded by an outline
  • White or black text and border color (minimal color)
  • Larger than traditional buttons
  • Prominence on the page
  • Stands alone – or if in a group, related to another group of buttons
  • Transparent with background showing through

You often see ghost buttons used well when they have a distinct contrast to their background and are clearly readable. This can definitely help with a website’s CTA since it provides an obvious element on the page — at least when placed against a background image. You also often notice them in the startup industry as a core design element, as well as see them in flat HTML and CSS frameworks such as Bootstrap and Startup Framework.

At the end of the day, it seems that there is a correlation between flat design and ghost buttons.

Ghost Button’s origins and Flat Design

Design trends are sometimes difficult to track down and Ghost Buttons are no exceptions. The first website that coined the term Ghost Buttons came from the tumblr blog Websites with Ghost Buttons. The ghost button seemed to evolve from Apple when they redesigned iOS 7. Many, if not all of the buttons on iOS 7’s UI are what we would call a ghost button.

Notice safari’s bookmark section…

ghost buttons

…and the update screen in the app store…

ghost buttons

…all great examples of Ghost Buttons.

Amit Tripathi of Crispy Coding agrees that the introduction of flat design through iOS7 has helped increase the popularity of the Ghost Button: “Since iOS7 promoted the use of flat UI, ghost buttons have also seen a huge surge in popularity” – via Ghost buttons in Web Dev.

So at the end of the day, the origin of the Ghost Button came from the flat design revolution. Though not created by Apple themselves, Apple helped increase the popularity of not just flat design but also the ghost button.

What are some of the Pros and Cons

With every design trend, it is important to understand the pros and cons of the specific trend.

Some of the advantages of Ghost Buttons are:

  • Clean, simple and modern design
  • Obvious CTA (when used correctly)
  • Unobtrusive CTA (when used correctly)
  • Not distracting — background image viewable
  • Easy design and implementation
  • Sophisticated look

Some of the disadvantages of Ghost Buttons are:

  • Can be confusing for non-technical users
  • Background image could drown out button
  • Button could overpower background image
  • Could be dated in a few years — think long term


ghost buttons avocode

ghost buttons transitions

ghost buttons parallax

ghost buttons unsung

ghost buttons alice couple me

ghost buttons paul van excite

ghost buttons grid style sheets

ghost buttons

Wrap Up

After reviewing ghost buttons, it’s origins, pros and cons, and some examples, it seems that ghost buttons used in the correct way can be good for design and for sales (effective CTA). It doesn’t seem that flat design isn’t going away any time soon, so I definitely would recommend using this design element.

For those who want some html and css examples, feel free to checkout these html and css ghost buttons.

What’s your take on ghost buttons? Let me know in the comments below!

The post A Quick Look at the Ghost Button appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

10 Quick Tips about Barcodes that You Should Know

For more than 30 decades now, barcode scanning has proved its utility in numerous industries, accentuating the fact that products based on state-of-the-art technology can also be accessible and easy…

For full article and other interesting tech related stuff visit the website.

How to Customize “Howdy” In WordPress Admin Bar [Quick Tip]

Every WordPress user should be familiar with the “Howdy” message that appears in the Admin Bar when they are logged in. The problem with “Howdy” is that it’s an informal word and sounds very unprofessional. Perhaps for some reason your client is given access to your WordPress Dashboard. If that’s the case, you might want to change it into a more proper greeting like “Welcome” for example.

In this post, we will cover how to do so. To top it off, we’ll also show you how to display a customized greeting for special public holidays like Christmas and New Year. If this sounds like an idea you have been wanting to execute for awhile now, let’s check out how it’s done.

Overwrite the “Howdy” Message

First, we want to overwrite the “Howdy”. Add these lines in the functions.php of your theme.

 function howdy_message($  translated_text, $  text, $  domain) { $  new_message = str_replace('Howdy', 'Welcome', $  text); return $  new_message; } add_filter('gettext', 'howdy_message', 10, 3); 

The above function replaces the “Howdy” with “Welcome” using the PHP str_replace function and applies the function through the WordPress own gettext filter. Once added, refresh the WordPress Dashboard and the greeting should now say “Welcome”, as shown below.

Special Holiday Greeting

Now we can make the greeting message more personalized. The idea is to greet the user during the holiday season. For example, if today was New Year, we would like to display Happy New Year followed by the user name. Likewise, if it were Christmas, we could wish the user with a Christmas greeting.

We need to get the month and the date. In PHP we can use date() function to retrieve the current date and month. Create a new function to call date() and output the result, like so.

 function public_holiday() { $  date = date('d-m'); } 

Assuming that today is 9th September, the output of this function would be 22-09. That is also to say that 01-01 is New Year, while 25-12 is Christmas. Having retrieved the date we can utilize it to set the greeting message, like so.

 function public_holiday() { $  date = date('d-m'); switch($  date) { case '01-01': $  message = 'Happy New Years'; break; case '25-12': $  message = 'Merry Christmas'; break; default: $  message = 'Welcome'; } return $  message; } 

As you can see above, we also set the default message to “Welcome” when the return value of the $ date does not fall to ’01-01′ or ’25-12′.

Now, we need to slightly change our previous function in order to show the message, like so.

 function howdy_message($  translated_text, $  text, $  domain) { $  message = public_holiday(); $  new_message = str_replace('Howdy', $  message, $  text); return $  new_message; } add_filter('gettext', 'howdy_message', 10, 3); 

Refresh the WordPress Dashboard once again. And if it is New Year or Christmas you should see the Howdy message change into what you’ve specified as per below.

More Ideas

There are more cool ideas that we can achieve. Some examples of what you can do to improve this particular area of WordPress includes adding more special holiday greetings like for Eid or by displaying a localized greeting based on the users’ current location or language preference. All you need is some creativity and basic understanding on PHP and WordPress functions, classes, and hooks.

Tentipi Shelters : Quick set-up and weather-tested construction make these Swedish tents fit for the extremes or garden parties

Tentipi Shelters

A basic need like shelter is often best met by a simple design. Enter the nordic vibes of Tentipi, a Swedish tent company inspired by the nomadic, indigenous Sámi people’s katas—structures that can withstand the worst…

Continue Reading…

Cool Hunting

Word of Mouth: The Sands of Ko Samui: A quick guide to the major beaches comprising this idyllic Thai island

Word of Mouth: The Sands of Ko Samui

by Jennifer Miller Any trip to Thailand should include some time spent at one of the country’s incredible beaches, which are known for their magazine-worthy shorelines packing fine white sand, cerulean water and luscious palm trees. Thailand’s beaches are an ideal escape from the heat and bustle of Bangkok, offering…

Continue Reading…

Cool Hunting

Peak Design’s Modular Camera Straps: A camera sling and hand strap with quick connecting links for swapping straps on the move

Peak Design's Modular Camera Straps

As any photographer that’s been around the block before will attest, few things are as irritating as equipment getting in the way of a shot, whether it’s restrictive straps or just poorly designed attachment points that take too much time to adjust. San…

Continue Reading…

Cool Hunting