Posts Tagged ‘usability’

Mobile Web Design

Monday, June 6th, 2011

Mobile web design is a whole new beast when it comes to design. We are working with a new set of variables as designers: screen sizes are smaller and their dimensions are across the board. Mobile design is relatively new, so there is a bit of discovery and experimentation when it comes to user experience and interaction. Plus, mobile devices are rapidly changing, so you have to stay flexible so that a design can adapt to meet the needs of the audience. And let’s not forget about differences in bandwidth between phone users. These variables create a whole new mix of ingredients that effects how design decisions need to be made.

To add to the mix, we are no longer working with the same exact user as we do with the standard web. The mobile user is generally on the go, (waiting in line, walking the aisles in a store, in their car lost…) and trying to get information quickly without having to wade through tons of excess ads and information. Mobile users browse less, and it’s more likely that they are on the hunt for something specific. Information has to be streamlined and clear of clutter—only key information is given to the users, so they can get what they need quickly.

With mobile’s such limited screen space, sites are often a paired down version of their web counterpart. Often, you also see a link to the full site, a good way to keep your bases covered. A normal sites’ large graphics, videos and odd fitting content, however, can cause viewers to run, not to mention slow their phone down. So, removing the excess (without removing the what keeps users excited), and keeping a more liner vertically scrolling site, is extremely key in keeping the design effective for your users.

When designing for the mobile environment there is a bit of guess work and important considerations that need to be made before jumping head first into design. You need to consider phone and screen-size restraints, but I think most importantly you need to have a good understanding of your users, what information they will want to access and were they will be accessing it from. By streamlining and cutting the fat of our full sites, we can keep our audience’s need for information satisfied. But, we can’t just cut out all of the fun and beauty that keeps users engaged. A great mobile site needs to be functional, fit, and still maintain the excitement of the full website.


2011 Web Trend: Creative Navigation

Monday, April 25th, 2011

Again and again I’ve run across experimental and creative ways to navigate a page. I’ve uncovered side-scrollers, one-page vertical scrollers, parallax scrolling, animation, story-telling, and even horizontal scrolling within horizontal scrolling (and the list goes on). These new types of navigation systems can give web sites an exciting and engaging way to captivate users, forcing them to interact differently with content, experiment, or be taken on a journey through your web site. But be careful, because something new and different can often confuse or scare users away.

More traditional styles of navigation are comfortable and expected to users, enabling them to easily guide themselves through your content. By steering your users in a non-traditional style, you can risk losing your audience. For this reason, it’s vital that your navigation remains effective. A non-traditional navigation needs to be smart, thoughtful, and content appropriate. An e-commerce site probably wouldn’t benefit from a single page scroller, because of it’s high-volume of information. But a smaller scaled portfolio or promotional site could potentially benefit from a more dynamic style of navigation. If you are in a specific design, illustration or web field, giving your users a new way to get around can be a great way to show off personal style, technique and skill.

Want to experience it for yourself? Check out these examples of creative navigation below:

Nike Better World
This site uses parallax scrolling to create a dynamic site with depth. Just scroll to explore and animate.

Jax Vineyards
This site uses a mixture of vertical and horizontal scrolling, for a clean, minimal look and feel. Constant top navigation is smart and let’s users interact easily with the site and side. Scrolling arrows are large and easy to maneuver.

Ben The Body Guard
This web site takes you on a journey, once you figure out about its vertical scrolling feature. Follow Ben along the dark streets to figure out all you need to know.

Youzee
This vertical scroller takes you step by step. Just click the button on the home screen to get started. Use the icon driven nav at the top or scroll on through each page.

crushlovely
With a constant navigation on the left, it’s easy to get around this vertical scrolling site. Each “page” is broken up vertically with a different color theme.

Polecat
This is a vertical stroller that allows you to jump between pages with a simple top navigation.


Was this review helpful to you?

Wednesday, July 14th, 2010

I’ve been having major cell-phone trouble. I couldn’t make a call longer than 5 minutes and I was unable to send out more than a couple texts at a time before my battery fully drained and my phone just shut down. It’s a horrible feeling being so disconnected. The solution: I needed a new battery. I wasn’t about to try to go to the Verizon store (I’m not much for waiting in line for hours) so I tried problem solving using good ol’ Google. I found a couple of online stores with batteries selling from $8.99-$49.99. I’m not sure why the battery pricing was so across the board, but I wasn’t about to pay over $30, and don’t even get me started about the additional shipping fees involved.

Amazon Review

In my search I found the holy grail of cheap batteries online for $3.99-$10.99 on Amazon. “How could this possibly be so cheap?” I asked myself. I of course was drawn to the cheapest battery ($3.99 new), but went straight to the buyer reviews, because how could such a sweet deal exist? Well, to my dismay…it doesn’t. I found out that some people (out of 21 reviews) had luck, but the majority found the product to look used, be scratched, and the new battery would still not hold a charge. So what did I do? I went for the $4.99 (new) version with the more positive reviews.

User reviews can definitely be a valuable resource for users and sellers. Reviews help build trust in a product; They let us see how a product will look or work in real life by someone who has actually experienced it first hand. A buyer can learn if their potential purchase will be reliable and good quality. A review can also help narrow down all of the other potential choices out there (such as my million other battery options). If a product is perceived as favorable by a consumer, product sales can take off. And vice-versa, a negative review can impact how much you sell (like the $3.99 battery). (more…)


2010 Web Design Trend: Introduction Blocks

Tuesday, April 6th, 2010

When you visit a site for the first time, one of the most important elements you can find is an introduction block. We look to the block to greet the visitor, introduce the site, and give a brief description of who they are and what they do. Many sites follow the practice of using an intro block, but it is generally uncommon to see them used on either blogs or e-commerce sites. This block is mainly found in the upper-left area of the page, which is usually be the first area a viewer will look, making it a great place to let the user see your most key information. You’ll notice that today’s intro boxes aren’t scared to break the boundaries. They can be found in new areas of the page and also tend to take up a large chunk of real estate no matter the quantity written. They are bold, beautiful, and a great way to make a first impression. Check out examples of large intro blocks below:

Sold Shops

Seth Said

Kyle Standing

Jason Reed Web Design

Big Cartel

Tobias Baeck


2010 Web Design Trend: Modal Boxes

Monday, March 15th, 2010

A modal box is a secondary window that pops up and floats over the top of a web page, requiring a visitor to interact with it before they can return to the main window. It works similarly to a pop up box, but is way better, because they are seamlessly integrated into the layout of a web site and there is no need to load a new page. These boxes are more stylish, user-friendly, and allow the viewer to focus on pertinent information. You’ll commonly see these used to display images in detail, on sign-in forms, for alerts or notifications, to display help tips, search boxes and video. Check out examples of modal boxes below:

Facebook

Jules

Jules

Sierra Trading Post

Digg

Digg

Tumblr


2010 Web Design Trend: Increased White Space

Tuesday, March 9th, 2010

Today’s websites are getting cleaner, more streamlined and focused on an increased use of white space. White space refers to the negative space between and around the elements in a design (graphics, type, columns, etc.). Those who are inexperienced with the use of white space may view it as an empty area, and thus a waste of valuable screen real estate. This blank space, however, is extremely beneficial to a design and the usability of a site. White space will make a layout much easier on the eyes. It reduces the amount of text a viewer will see at one time, increasing legibility and helping a visitor quickly find what they are looking for. It can also improve the structure of a site by creating a visual separation of elements, allowing content to stand out from the background. Not only is it functional, increasing space can also give a web site a more professional, uncluttered, and fresh appearance, providing a strong platform on which to present your message. Check out the examples below for excellent uses of white space:

Apple

Jason Reynolds

Indie Labs

Buffalo

Astheria

Left


2010 Web Design Trend: Speaking Navigation

Thursday, February 25th, 2010

For some, one word navigational links simply aren’t clear enough. Designers are now trying to explain, in a short snippet, what the visitor should expect to see upon clicking on a link. This additional short phrase has been coined as “speaking navigation,” as opposed to “silent” navigation which follows the traditional style of using keywords to represent a group of information. The end goal in this method is to create a more effective communication style with site visitors. If content can be clarified, navigation will be simplified for the user and could potentially generate increased traffic through the site. Check out the examples below of speaking navigation:

Sifter

Sifter

Lift Interactive

Lift Interactive

AgentPoint

AgentPoint

Lennon Bus

Lennon Bus

You Version

You Version

Dishizzle

Dishizzle

goodbytes

goodbytes


2010 Web Design Trend: Icons

Tuesday, February 9th, 2010

The use of icons is getting big in modern web design. Icons are being employed to enhance the user experience, allowing for better visual recognition of elements on a page. Today’s icons are extremely stylized, far from old-school clip art of the past. If it is well designed, an icon can make a great visual impression as well as enhance the look of your site design. An effective icon will give a clear meaning to the user and allow them to easily spot what they need faster than from standalone text. Though icons are great for usability, too many icons can distract the user and get confusing. Today’s focus is on using icons more sparingly and giving the icons you do use higher-value locations. Fewer, more effective icons command attention and will be more appealing to the user. Check out the examples below of excellent uses of modern icons:

FreelanceSwitch

FreelanceSwitch

AshWebStudio

AshWebStudio

Curb Innovative

Curb Innovative

Artificial Studio

Artificial Studio

EnviroSpeakTV

EnviroSpeakTV

Dishizzle

Dishizzle

Macrabbit

Macrabbit

Media Temple

Media Temple

SMS Parking

SMS Parking