Category Archives: Tutorials

You have to take thousands of tiny actions into consideration if you want to succeed. Success can often boil down to one big question—will the site you’re building deliver a great user experience? You can drive as much traffic to your website but if it performs badly then you are just wasting visitors. Some simple design tweaks can even have an impact on the growth of your business.

UX and UI

User experience (UX) is hinged on two factors—content and user interface (UI). While it’s the content that your visitors come looking for, the UI actually makes it possible for them to find and interact with that content. If you have priceless piece of content but a bad UI, your visitors could run for the hills and never look back. Designing the perfect UI is an ideal that thousands of developers pursue every day. It’s a continuous process, not a one-time activity. You have to do the best you can, and let the UI evolve with technology, testing and real-time experiences.

UI and Usability

Your UI thrives on two things—visual appeal and usability. However, a great looking UI that is not usable belongs in an art gallery, not online.

Usability is a measure of how easy (or hard) it is to use a particular object. The concept of usability is not confined to websites alone, but encompasses tools, machinery, and any other piece of equipment that is supposed to be handled by humans. The single most important factor when considering a UI redesign or even a new build is the goal or purpose. If you do not fully understand what you want your users to do – they definitely will not either. With that in mind your UI needs to be evaluated for the following attributes to determine its usability.

1. Ease of use — How easy the UI is to learn for first-time users

How quickly and easily a visitor coming to your site for the first time can learn to perform different tasks, such as find the content, buy a product, compare prices, etc. For UI’s designed to perform complex tasks (such as development, A/B testing, content management), adequate guidance must be provided in the form of video tutorials, live chat, tool tips, etc.

Split testing decktops

2. Memorability — How easy the task is for repeat users

Memorability defines the ease with which your repeat users are able to remember and accomplish different tasks.

3. Intuitiveness — How obvious it is to accomplish the task

Does everything work just as the visitor would expect it to work? For instance, most websites have a menu on top of the page. It will not be intuitive to place the menu at the bottom – that’s not to say you can’t make it work, but a bottom menu is not a location that aligns itself with natural behaviour of internet users.

4. Efficiency — How much time it takes to accomplish the task

Can your users accomplish the required task smoothly and in minimum time? Are there ways to reduce the time it takes to complete the task?

5. Precision — Is the UI prone to errors?

What are the reasons that cause a user to encounter an error? Have you taken the actions that monitor and then minimize or eliminate these errors?

6. Fault Tolerance — What happens if there’s a mistake?

Regardless of how careful you are, mistakes can happen. Have you implemented the controls to resolve a problem once it happens?

7. Affordance — Are interactive elements related to the task?

Affordance defines whether different menu items, icons, buttons etc are obviously and visibly related to the task they are supposed to perform. Are the controls visibly interactive? Do they depict the results of a user action such as clicking or hovering? There are loads of resources online for some amazing icons and buttons, here’s a good place to start. Try some out and test the results.

Usability Testing

As you will appreciate, usability is something quite subjective. The concepts defined above are easy to understand, but can be tricky to measure. Different users may respond to the same UI in different ways. No matter what you do, some of your users will still face difficulty and make mistakes in performing the task.  So, you may need to define a certain criteria for optimum usability.

UI_schede2 (1)

A variety of testing methods are en vogue for evaluating usability. All of them involve observing user actions or collecting user opinions. One of the basic and effective testing methods entails constructing a scenario where the user will interact with the interface (such as in office, at home, or while driving). The use performs a list of common tasks and an expert observes and listens to the user while different tasks are being performed. Watching users interact with your UI is a great way to test usability, as you can immediately see the difficulty the user is facing.

Testing Methods

Here’s a brief look at the commonly used methods for testing usability.

  1. Random Testing: Also known as Hallway Testing, this method uses random people to interact with your website. These users are not trained or experienced in testing. The method is deployed earlier on in the development process, such as when testing the site for the first time. The subjects should be outsiders who are not involved in development and are new to the site.
  2. Expert Testing: As the name suggests, an expert tester is tasked with evaluating the usability of your UI. The expert then gives his or her review of the usability. The testing can be conducted at a testing facility or remotely. If its within budget you should also consider asking expert advice on A/B or multivariate testing. It can can come at considerable cost, but the long term benefits usually outweigh the initial costs significantly.
  3. Paper Prototypes: In this method, hand drawn or rough sketches of the interface are created on paper. The user is then asked to identify different items or controls. This method allows developers to test design ideas at a negligible cost, before undertaking the actual development.
  4. Interviews and Questionnaires: Interviews are more flexible than questionnaires, as the observer can ask direct questions about the user’s experience. On the other hand, questionnaires allow for more structured data collection from a large number of users.
  5. Self-conducted Testing: There can be several stages during the development process when the developers create a realistic testing scenario and try to assess the usability by walking through the task themselves.
  6. Scientific Experiments: When testing for comparison between two different interfaces, a controlled experiment is created following the scientific testing principles. A control group is created and their actions are observed and compared with an experimental group. This type of testing is complicated to conduct, but yields accurate results.
  7. Remote Testing: Perhaps the most popular type of usability testing, remote testing involves users dispersed in several different countries and time zones. It is an effective method of testing as the user interacts with your website in their normal environment rather than in lab conditions. Remote testing can be moderated using video-conferencing software such as GoToMeeting. However, the latest trend is to test using new, inexpensive software. The software allows even non-experts to act as observers for evaluating the website’s usability. These tools automatically record the user’s’ activity stream, clicks, location, and any errors that might have been encountered when using the website. The users can also provide feedback about their experience with the site. Looking at this data, the developers can find out how much time it took to complete different tasks along with any critical flaws in the workflow.

Tools for Testing Usability

As mentioned, there’s a variety of tools and software available for testing usability. Most of these tools are free, whereas some require a modest fee. They help you test various aspects of your UI, such as design and navigation, error analysis, accessibility, readability, etc. Here’s a look at some of them.

Navigability Testing Tools: A good navigability allows users to easily browse back and forth through the pages on your website. The traditional methods of testing navigation include card sorting and tree testing. The concept behind these techniques is to arrange the topics and sub-categories in a way that makes it most convenient for the users to find them. Here are some tools that can help you with these techniques.

  1. Websort.net: Allows you to create cards for your topics and categories and ask remote users to sort them.
  2. OptimalSort: Provides extensive card sorting options to determine the workflow of your website.
  3. Treejack: This easy to use web app allows you to create tree maps of your pages and categories and share them with remote testers

Accessibility Testing Tools: Your website will be accessed by users in multiple locations using multiple devices. You should make sure that your site is easily accessible through different browsers and platforms, such as laptops, mobiles and tablets. Accessibility is not only about making your site usable for people with disabilities, but also refers to anything that hinders people from interacting normally with your site.

  1. BrowserShots: Allows you to preview your site in an extensive variety of browsers and their different versions.
  2. CheckMyColors: Check whether your color scheme works well for all users. This tool tests the brightness, contrast and luminosity and displays sample text so that you may fix the issues.
  3. VisCheck: This tool predicts how the images and color scheme would look to a person who is colorblind.

User Experience Testing Tools: User experience sums up several factors about your website to determine the overall level of users’ satisfaction. Most often, user experience can be evaluated by asking your users a series of questions. UX can mostly be tested only qualitatively, as it may be impossible to quantify user perceptions and feelings. Here are a few tools that help you collect user feedback about their experience with your UI.

  1. UserVoice: Allows you to collect user feedback, which you can also make public. Other users can vote on the feedback to give you a fair idea about its validity.
  2. FeedbackArmy: Pose open-ended questions to trained and experienced reviewers. For $15, you’ll get 10 responses.
  3. ConceptFeedback: You can use this tool to collect feedback from experts about your site’s design.

Interactivity Testing Tools: These tools enable you to find out how the users are interacting with your site. You can see where they are looking and clicking, so you may modify your UI and deliver an enhanced user experience.

  1. ClickHeat: The free online tool tracks user clicks and displays results in the form of an interesting heat map.
  2. ClickTale: Tracks keystrokes, mouse movement, clicks, and the time it takes users to move around different pages.
  3. CrazyEgg: Another popular click tracking software that provides a wealth of insights based on user interaction.

Speed Testing Tools: Although it’s generally not considered a component of usability, the time that it takes for your website to load is crucial – especially for search result rankings. Loading speed is one of the most important factors in deciding whether the people clicking through to your page will bounce. Even a 1/100 second delay in loading can turn away visitors. You can test your site’s loading speed using one of the following tools.

  1. Pingdom: This free online tool is extremely simple to use. Just provide your website’s URL, and the tool displays the loading time and size of your pages.
  2. PageSpeed Insights: This Google API evaluates your website based on Google’s recommended web performance best practices.
  3. GTMetrix: Another free tool that assesses the performance of your pages and the reason for slow loading times.

After Usability Testing

After you receive the test results, you should sit down with your team and study the results closely. Look at the time it took your users to complete the tasks for which you’ve been testing. Think about the changes that will enable the users to complete the task faster. Consider the feedback from experts and resolve the glitches or ambiguities that might exist. After you’ve implemented the changes, you’ll need to test again to determine if the changes work, and if there are any additional problems that come up. This procedure is a great way to start a digital strategy transformation.  Remember –  usability testing is an ongoing process through which you pursue the perfect user experience, the ultimate goal of your UI.

webdesignlayout11

Today most web designers will create the visual design of a website in Photoshop first and then once the design has been nailed down they will start to create the code from there. In this article we have collected 20+ amazing tutorials for creating web layouts in Photoshop. If you have used any other tutorials in the past feel free to share them with us!

Continue Reading →

photoshopcard9

With more and more businesses and business people handing out business cards to everyone and their dog it can sometimes be a little difficult to stand out among the crowd, on Monday we showed you some amazing business cards for inspiration, and today we will show you some of the best tutorials for creating your very own business card.

Continue Reading →

Each avenue in the design world has its own unique challenges and tricks, and magazine design is no different. From style guides and gutters to editors and entry points, designing for a magazine comprises its own set of rules and considerations. Before jumping head first into the text-heavy, deadline-driven world of magazines, take a moment to get your bearings and familiarize yourself with the terrain. Using the road map below, your creativity, and a bit of luck you’ll have everything you need to produce a top-notch, reader-friendly magazine.
Continue Reading →

In this tutorial, we’ll be looking at how to transform a photo of a person into a work of art – in this case, a highly illustrated sketch art piece.

Vector shapes and textures will also be added to our composition as this will give our sketch artwork more depth and character. Below are examples of what you could achieve even with the simplest of art forms (pop art etc) to create interesting and beautiful effects from a picture. The final images could used as e-cards, profile pictures/avatars, wallpapers and so on.

Continue Reading →

Textures can form a principal element in your designs. They add details to images, giving a great deal of depth to a composition. Textures could come in the forms of high resolution images such as detailed surfaces of rocks, fabric, wood etc or can just be regular pictures. We have produced 7 exclusive free metal textures for you to download along with a step by step tutorial showing how they were made.
Continue Reading →

As avid computer users we all know how many tedious tasks we have to deal with on a daily basis. However, we tend to ignore an important fact: we’re using a computer. We shouldn’t do any of these tasks by hand. Everything that sounds repeatative should be accomplished by a computer, not by hand. Let’s see how we can achieve this on a Mac Utilizing Automator. Continue Reading →

Page 1 of 11123...10...Last »