Blog

User Testing

In order to improve the performance of your website, you need to conduct website usability testing. Usability testing is a way to evaluate how easily users can accomplish a given task on a device. In a usability test, a subject is asked to complete a task, typically while being observed by a researcher, to uncover potential user problems. The subject is asked to talk through the thought process out loud while completing the task so that the researcher can understand the subject’s actions. The researcher carefully watches the subject’s actions and listens to the monologue. All of this just to improve the performance of your website.

Usability testing is especially important for websites. Your overall website performance will be determined in part by its usability; visitors need to be able to easily navigate through your website.People also mainly enjoy using websites that are intuitive and easy to navigate, but will discontinue using websites that are confusing.

A website usability test can confirm that a problem exists so that you can solve it quickly.

Here are some website usability testing tools you can use on your very own website:

What Users Do

What Users Do is an online user research platform that tests various assets, including your website, prototype, or app. You can set the task you want users to perform, select test subjects from a pool of prospective users, and receive a video of users performing the task. In the full version, you can get help from the What Users Do user experience team to design, perform and analyze your usability test.

User Zoom

User Zoom is a company that provides usability and customer experience evaluations, including web remote usability testing, prototype and concept testing and mobile surveys. A team of UX experts can help you conduct your research, from prospecting clients and managing participation incentives to conducing your test and analyzing your test results.

User Testing

User Testing is an online service that provides recordings of real people and their commentary while using the website. You can select the demographic and the specific areas of the website you want analyzed. This tool employs a process that uncovers weak areas of your website.

UsabilityHub

UsabilityHub is another tool to test your designs and mockups on real users. This tool shows visitors’ interactions on your website, what they remember and where they make mistakes. This tool can also be used before your website goes live.

How To Make Websites Faster

Page Size Optimization

When making a website, you will want to work on your page size and orientation. But before we get into how to get your page size optimization to just the right way to match your site’s layout, we will start with just what exactly page size optimization is.

Page size optimization is what is commonly used to describe the task of optimizing the rate at which a web page would load on a computer’s monitor. To do this, the web page would need to have a high page size optimization. But how do I get my web page to have the right page size you may be asking? Well, in order to do this, you would need to have the right sized web page file size. To do this, you must take into consideration what exactly it is that you want to have on your web page. Now as there are a great deal of ways that you can decrease the size of your web page file, we are only going to talk about a few to give you an idea of just how you can decrease the file’s size.

First, lines of code in JavaScript and style sheet files. If your web page file contains a high number of lines of code, you may need to think about which of these lines of code your web page could function without. The higher the amount of lines of code your web page file contains, the longer the length of time your web page will need to load in will be.

Another way you can decrease the size of your web page file greatly is to what is called Gzip compression. When you enable Gzip compression, your file will have it’s size cut down by almost ninety percent. This will give you more space in your file to support a faster load in time for your website.

The last way we will discuss is called optimizing images. You know that images are crucial to your website’s design, but with all of these images comes a slower load in time for your webpage. Recent studies have shown that a normal website’s images are responsible for around sixty four percent of the files over all size. To fix this, it is advised to compress your image size. After you have compressed your web page’s image, your web page’s file size will have decreased greatly.

Bootstrap CSS

Bootstrap CSS

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes. It also ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. It sets basic global display, typography, and link styles. It requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

Grid System

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Here’s how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

 

 

DESIGN STRATEGIES

Design Strategy

The goal of a design strategy is to merge business and creative objectives in a meaningful way that moves design beyond just an aesthetic exercise. Design strategy could be described as inventing the language to express your client’s business strategy most clearly.

Design Thinking

Design Thinking is a methodology used by designers to solve complex problems, and find desirable solutions for clients. A design mindset is not problem-focused, it’s solution focused and action oriented towards creating a preferred future. Design Thinking draws upon logic, imagination, intuition, and systemic reasoning, to explore possibilities of what could be—and to create desired outcomes that benefit the end user (the customer).

Design Touchpoints

Employees:

  • Advocacy
  • Evangelism
  • Social Network Media
  • Sales
  • Intranet
  • Customer Support

Product:

  • Product Design
  • Packaging

Public Relations:

  • Press Releases
  • Launches
  • Events
  • Media Coverage
  • Philanthropy
  • Conferences
  • Speakers Bureau

Promotion:

  • Sponsorship
  • Events
  • Community
  • Outreach
  • Trade Shows

Advertising:

  • Print
  • Radio
  • Online
  • Television
  • Outdoor
  • Mobile

Marketing:

  • Direct Mail
  • Telemarketing
  • Store
  • Sales
  • Point of Purchase

Communications:

  • Print
  • Brochure
  • Catalog
  • Book
  • Signage
  • Annual Report
  • Policy Report
  • Online
  • Website
  • E-mail
  • Social Network
  • Media
  • Blogs

What Goes Into A Design Strategy?

Any design strategy should address the following:

  • Existing problems and ongoing challenges
  • Current benefits and successes
  • Unmet client/customer needs
  • Changing client/customer behaviors and attitudes
  • Emerging ideas and trends
  • Opportunities to differentiate

A Framework for Design Thinking

Discovery: choose an affirmative, strategic topic. Gather some data. Understand and empathize with unmet needs.

Frame Opportunity: Look for patterns and insights. Question assumptions. Frame your point of view. Define your scope.

Incubate: witch gears. Feed your brain with diverse stimuli. Meditate. Sleep on it.

Ideate / Illuminate: Experiment. Explore possibilities. Envision a desired future. Co-create in diverse team. Make your ideas visible.

Evaluate / Refine Ideas: What is desirable, feasible, viable about your ideas? what are the constraints?

Rapid Prototype / Test: Think big, act small, fail fast; learn from your mistakes and refine.

Deliver: Final testing, approval, and launch.

Iterate and Scale: Evaluate. Learn. Create. Innovate.

~

Design thinking offers a structured framework for understanding and pursuing innovation in ways that contribute to organic growth and add real value to your customers.

The design thinking cycle involves observation to discover unmet needs within the context and constraints of a particular situation, framing the opportunity and scope of innovation, generating creative ideas, testing and refining solutions.

 

 

It’s All About The Audience

Target Audience

When creating a project, it’s important to remember that your project is for an audience. By keeping your target audience in mind you will be able to make better decisions about the look and feel of your website and how you want it perceived by your visitors. You have to consider geographic location, age, gender, level of education, profession, race, and religion. Also lifestyle choices, interests and hobbies, behaviors, music they listen to, and / or products they use.

Layouts, color choices, font selections and content are all also important decisions that need to be made.

Layout

The information that needs to be displayed and the audience you are trying to reach will help determine what kind of layout will work best in reaching your target audience.

If you’re designing for kids or senior citizens, you want to keep it nice and simple, with lots of clear, white space and clean, simple navigation. Teenagers, young professionals and geeks will prefer a more complex layout to hold their attention and they could cope with a more sophisticated navigation system. Full-width layouts tend to appeal to a trendy, young crowd, while a traditional layout is the safe option if your audience is a little more conservative.

Color

Colors can sway thinking, change actions and effect moods. Certain colors also appeal to certain genders or age groups.

Young kids are more likely to respond to primary or rainbow colors, but those same primary colors will look far too basic on a site aimed at a more sophisticated crowd.

Font

Selecting appropriate fonts for your audience is also important.

If designing for a younger group, one might use a fun scripted font whereas a corporate site would use a more conservative font such as Open Sans, Arial or Helvetica (serif typefaces). If you want a more contemporary, streamlined feel, then look at the sans-serif typefaces.

Content

Your target audience will also affect the content on your site and how the information is presented.

If writing for professionals, one may use industry specific terminology more freely. Whereas if  you’re designing for young kids, minimal text is advisable, with lots of colorful images and animations to capture and hold their attention.

In terms of images, graphics, and animations, they are engaging and stimulating for young kids, but if your audience isn’t especially computer literate, or is likely to suffer from a slow internet connection, then it’s best to avoid large slow-loading graphics, animations and videos as people unlikely to hang around for the page to load.

 

 

 

 

Proprietary Copyrights of Fonts

First off:

Copyright

Copyright is a form of legal protection provided to those who create original works.  The copyright owner has the exclusive right to reproduce, adapt, distribute, publicly perform and publicly display the work. Any or all of these rights can be licensed, sold or donated to another party

~

Many people do not understand the law governing the use of typefaces and fonts. They just assume that they can freely use any typeface or font they please for any project. Copyrights do exist for fonts, just as they exist for photos. Yet Copyright does not protect typefaces.

When you purchase a commercial font, you are purchasing a license to use the font software. Your rights and obligations are defined in the End User License Agreement. Those agreements will vary among fonts and among font makers, so read them very carefully to understand what you can and cannot do with the fonts you’re licensing.

Fonts may be protected as long as the font qualifies as computer software or a program. Bitmapped fonts are considered to be computerized representations of a typeface and are not protected by copyright law. And Scalable fonts – because they are incorporated as part of a program or software – are protected by copyright.

Copyright law (at least in the U.S.) protects only the font software, not the artistic design of the typeface. It also varies by country.

License

The purchase of a commercial font/typeface basically gives you, the buyer, a certain right/freedom to use it as you see fit, for both commercial and non-commercial works.

Some fonts, can come with up to five licenses. A font that comes with one license basically means you can only install the font on one of your own computers. A font that comes with 1 – 5 licenses means you can safely install the font on up to five of your own computers, but no more. If you have more than five computers, and you need the font on all of your computers, then you would have to find another font that gives you the freedom to install the font on as many computers as you’d like.

K-Type Standard License

Purchasing a K-Type font grants you non-exclusive rights to use the font commercially on paper, on film, online and embedded in documents. The software may be stored on up to five workstations and output devices. You cannot legally give the font to others or install it on their machines.

 

It’s Safe

Web Safe Colors

Web Safe Colors consist of 216 colors that display solid, non-dithered colors and are consistent on any computer monitor, or web browser.

The Web Safe Color palette only contains 216 colors, instead of the maximum 256 colors, because only 216 out of the 256 colors will display exactly the same on all computers. The remaining 40 will differ depending on the computer.

Ten or so years ago, most computers were only capable of displaying a maximum of 256 colors at a time. The 256 colors were determined by a mathematical formula. This basic palette of 256 colors would display solid colors on specific platform’s monitors that were capable of displaying 256 colors. This palette of 256 colors contains the 216 colors we now call the Web Safe palette.

Web Safe colors are defined in terms of RGB values of 0, 51, 102, 153, 204, and 255; made  up of multiples of 51. There are two different web safe palettes: Netscape and Microsoft IE.

Netscape

Six groups of colors (36 colors per group) make up the entire palette. All squares begin with a common value of 255 red. The blue component starts at 255 for the first row and decreases per row by increments of 51. The green component decreases per column as you move to the right in the same increments. The next set of 36 squares are identical except that the red component in each color is reduced by 51 to 204. The next group have a red component of 153 and so on. The last group of 36 squares contain 0% red.

The Netscape palette starts off with white and ends with black. Each group of 36 colors decreases by increments of 51 (20%) in the red component until you reach the last group which has 0% red overall. The very last color has 0% red, 0% blue and 0% green, or black.

Microsoft IE

Microsoft, exactly opposite of Netscape, starts with black and ends with white. In the first group of 36 colors all colors contain 0% blue.  The blue component increases by 20% ending at 100% blue in the last group of 36 colors. The red component increases from left to right while the green increases from top to bottom.

The difference then between the two palettes is that the Microsoft palette plots the starting value of 0 for both red and green from top left outward, while the Netscape palette plots 0 for the blue component top left and plots 0 for green bottom left.

~

Word of Advice: If your web site has a solid colored background, make it a Web Safe color. That’s your guarantee the color will not embarrass you when it displays on the other computer platforms.