Category Archives: usability

RWD2014 || Year of the Mobile

Responsive web design is extremely critical in today’s world; it is necessary for survival among the fittest. No doubt mobile browsing has blown up and continues to grow exponentially. There are times where no matter how good a company’s web site looks on the monitor, if it is not “mobile friendly” and the user gets a poor experience, well, the site might as well be deemed no good at all. On a personal level, I can relate to the importance of mobile browsing. For example, after giving someone my business card usually one of the first things they do is pull out there iPhone, and look at my portfolio. If my personal site was not built with a responsiveness to adapt to different media devices and viewports such as the iPhone; and the viewer looking at my work does not have a good experience, this could jeopardize the integrity of my work and in turn, possibly be loosing future customers and contacts. I would like to quote Andy Clarke, web designer, author and founder of Stuff and Nonesense. Andy says, “Anything that’s fixed and unresponsive isn’t web design anymore, it’s something else. if you don’t embrace the inherent fluidity of the web, you are not a web designer, you’re something else. Web design is responsive design. Responsive Web Design is web design, done right”…

Q&A with a UI/UX Designer

For this weeks blog I decided to interview a friend of mine and professional graphic/web designer. 

 Ryan Canfield is UI/UX designer & front end developer at Synapse Studios specializing in web-based javascript applications.

What do you think is one the most important thing as a web designer?   Thinking past static design & layout to consider the web at all screen sizes.

What about the creative process?   We use a repeatable, successful pattern. It starts with sketching, wire framing, mock ups, rapid prototyping and then development .

 How important is the creative process to you?   Very! Synapse didn’t have designers a few years back, it was developers doing front end. Having designers makes a huge difference in the usability of web applications.  Being classically trained as a graphic designer helps me daily in web design. I use the principles of design, like color theory, rhythm, balance etc. these fundamentals are paramount!

What is your outlook on simplicity?   Simplicity depends on necessity. That is one thing designers forget with the web design and graphic design in general. They feel like they need to fill all the space like it is some “hole to fill” esp. junior designers. Question the necessity of everything you include in the design and then question whether is it presented in the best way possible.

What about the the placement of things like “call to actions?”   You want to make sure your main call to action is available and accessible almost anywhere.  If you’re delivering information you want it at the end of that information. It should be the most prominent path for a user to take.

What do you think about traditional web placement i.e. headers etc. and switching the placement of them up, in non traditional ways?   It really depends on the users of the site or app. Sites that have the same user base are better candidates than sites that have mostly unique visitors. Additionally, younger, more techie users are going to figure out the placement of things and are less likely to get frustrated. With users that struggle you probably want a more conservative layout. You have to determine purpose of the site and the target audience. A marketing site is going to be selling products/services, reference website will be delivering information etc.

Any input for junior web designer?   Mobile first approach, responsive design and write clean code!   


Finding your mobile vision

A few years ago, we got a checklist of proposed features from a client. They wanted the site “.mobi enabled”. We spent a few minutes looking at each other like dogs trying to understand calculus, and then realized, fundamentally, that we were looking at a “someone read a white paper” scenario. They wanted to get in on the big buzzword, but had yet to analyze the value proposition.

Nobody’s going to discount the growth of mobile. We’ve all got our collections of phones, tablets, and even the occasional netbook. However, a fortune thrown at mobile development will net you no extra revenue if it doesn’t serve a user purpose.
Continue reading

What Failed State is Your Existing Website?

When we bring in an existing website, it’s often like bringing in new government to take over after a coup. There’s both fear and hope in the hearts of our clients. But most interestingly, there’s a lot of similarity in the aftermath you have to build from. By being able to pick the right metaphor for the site, you can know what’s likely to happen when you get developers in to fix it.
Continue reading

Help us Choose the Right Cart for You

We often have customers coming into us asking for a shopping cart. Admittedly, this is often a complex process. There are few brand names the average consumer will recognize. Many times, a list of 300 features consists of ten you care about, 30 which you assumed were in every cart, and 260 which are only of use if you do drop-shipping to customers in Outer Mongolia and accepting payments in Vanuatuan Vatu. Now, we don’t expect you to come to us saying “CS-Cart please”, or “We want Zen-Cart”. We’ll do the research, but you have to meet us halfway– there’s a lot you can plan in advance to make the process easier and much smarter.
Continue reading

Why Develop In Phases?

I know you want the entire site to roll out on launch day. The huge cart with 5,000 products. A blog with articles stretching back to when Al Gore first breathed life into the Internet. A customer-relationship management package so sophisticated it has seperate responses for every obscenity an angry customer uses with your call centre staff. But is this the best choice for your company? Probably not.

A staged deployment offers you several benefits at no significant extra costs.
Continue reading

Don’t Edit– Perform a Task

In this blog, I tend to be inspired frequently by the interactions I have with clients. Over time, you see the same requests again and again.

A real doozy is the “can’t we edit…?” line of discussion. Whenever you build a database-driven system, like a CRM system, or even a sophisticated order-tracking or shopping cart system, people decide they want to be able to edit the enterred data.

Now, there’s nothing inherently wrong with allowing you to edit PARTS of your data. The trick is to abstract it– rather than editing data with no constraints, you provide the functions to perform legitimate business operations. For example, it makes sense to have an “update customer address” tool, or a “delete product from order and adjust price tool.” The dangerous aspect comes when you want to start editing any field on a record free-form.
Continue reading

Usability Nuggets

  • On a blog site, “previous page” and “next page” are surprisingly ambiguous, because content is typically ordered so the latest content is on the first page. “Newer Posts” and “Older Posts” avoid any uncertainty. Or alternatively, take a page from firms publishing Japanese comics and add a “Warning: you’re at the end of the blog” interstitial at the front of the site.
  • Custom internal search is a “do it right or don’t do it at all” thing. If you’re using a canned package, like a shopping cart or a CMS, try the custom search. Does it blow up on typical customer needs? A common example of this is only searching product titles. If so, you might be better using a Google-powered search box instead; while less tightly synched with the database, it will be the search experience customers know and trust.
  • Here’s the math on registration: Is emails from 30% of your users worth irritating 100% of them, and abandoning 70% of them? I’m looking at you, every company who ever published a white paper.
  • The promise of personalized content comes with an implicit guarantee of perfect personalization– or, at least, perfect as you know it. AmazonMP3 seems to love to reccomend me the very album I bought FROM THEIR SITE. TEN MINUTES PRIOR. Are they hoping I won’t notice and buy it again? Or do they solely want to undermine my trust?
  • While on the subject of reccomendation engines– understand the difference between one-way and two-way purchase relationships. Someone with a printer may buy toner, but someone who owns a toner cartridge is unlikely to buy the corresponding printer.
  • Give your site a spin through a translator. It’s a great way to see if there’s images storing valuable content that could be released as text. In addition, how badly it gets garbled can be an indicator the language itself may be too complex or specialized for a mass audience.
  • Online video, especially in the current environment of “compromise with Flash”, can be a huge performance drain if you want to keep several on a window at one time. No site works well when the browser takes 20 seconds to scroll. Better to look at a slideshow presentation where only one video frame is in play at one time.
  • The “fix the bad fields” error message is unproductive, because it requires users to skim the entire form for the marked incorrect fields. If the form is several screens tall, or has breaks in it, this can mean a lot of scrolling. A better answer may well be a list of the faults identified.
  • Tiny regionalization faults can lead to big comedy and undermined customer faith. You’d be surprised how often the stock photos of “American” businesses show stacks of pounds, euros, or roubles. Not to mention the common “Enter your postal code” or non-standard address format support. All together, it tends to give your site a delightful 419-scam flair.
  • Recognize when persistent preferences make sense. Hulu: I’m looking in your direction. Did I not just enter my age to see a video 24 minutes ago, and now need to re-enter it to see the next one? Bull. Flash lets you set a cookie; it caused the privacy advocates to have kittens, so surely you heard about it. Use it.

Not Everything’s a Nail

I recently had a discussion with a customer annoyed that it’s hard to edit the home page contents in Zen Cart. Not surprising. It’s a cart, not a full-service WYSIWYG website system. Given the hammer he has, the home page became a nail.

While it often makes sense to make a shopping cart, or a blog, the central aspect of your site, you do have to recognize the tradeoffs.
Continue reading

The iPad doesn’t change the web

Yes, I’m being deliberately inflammatory. The media seems to imagine it’s the salvation of the newspaper, and some brilliant shift in the Internet to accomodate it. Sorry, but what it is is a shiny, locked in gimmick.

Apple has steadfastly avoided the Netbook trend– the sub-$400, 7″-12″ laptop which now represents a significant amount of all PC sales. No surprise– a $399 iNetbook would cannibalize sales of their $1,000 and up machines.

Instead, the iPad runs a limited system most reminiscent of an iPhone scaled up to twice its original size. Among the major limits: limited developer access, crippled multitasking, and the same interface conventions.

Limited Developer Access doesn’t sound like a big fear. Get anything you want from the App Store. It’s all pre-vetted and safe too! Consumers initially like the concept of a ‘safe’ source for software. Apple drools over a cut of every sale. But what happens when there isn’t the App you want, because of Apple’s policies? We’ve seen it plenty of times on the iPhone platform already– Google Voice was delayed and hobbled, turn-by-turn navigation arrived late to the party. Unfortunately, the truly breakthrough products– from the open-architecture PC to Facebook– have benefitted from an ecosystem which allowed someone to bring out the “out of left field” application.

Why does multitasking matter? The more hardware resources you have– whether it’s screen pixels, processor cycles, or memory– the less likely you’ll need them all the time. Moreover, the more convinient it can be to have something else in the space. If you have a big monitor, you probably don’t keep one window full screen all day– so it becomes worthwhile to have media players, IM clients, and such which can fill in the extra space. A device like the iPad will be fundamentally limited if you have to stop and go to a different program every 5 minutes.

Finally, the interface conventions. Once you get to an 8″ or 10″ screen, you’re making excuses if you can’t have a decent keyboard. In such a situation, it seems like you’re really just trying to keep the device a toy– if people can’t write a document on a touch-screen, they’ll buy that $1,000 MacBook.

All in sum, it means Apple delivered a compromise device– built more around their desires and product-segmentation aims than a real consumer desire. It also means thaat it’s unlikely to become a true “platform” the way the iPhone and iPod systems did.

For the person who wants a full-scale device, the Asus EEE Tablet can do anything the iPad can and a thousand things more. For the customers who want a little less, single-purpose devices like the Kindle offer a experience built around a single need. The eBook sales logic for the iPad seems a little weak when you realize the Kindle offers 10 times the battery life and a text-friendly screen.

Finally, how does it fold back into the whole web thing? Simple: The “Our Company is an App” thing will not scale past a certain point. Yeah, when it’s a mobile phone, fine, but when you’re looking at bigger screens, bigger memories, and bigger expectations, you’d better return to the basics of the Web:

* There won’t be one master device to emulate the behavior of. The iPhone apps which follow Apple’s style guide are fine. But a website designed to match the feel of OSX looks out of place on Windows XP. It’s true even on “midsize” devices like netbooks and tablets, which may run the iPhone OS, Windows XP, Vista, or 7, Linux, or potentially even Android.

* Users will expect an experience on their terms. Their MP3s are running in the background, so don’t load music. They may be leaving an instant messenger or video open, so don’t hog every pixel on a display.

* Compatibilty is still king. Yeah, it works in Mobile Safari on the iPad, but for the people who bought someone else’s tablet and are running Firefox or, help us all, IE8?

* There’s no master storefront to get on everyone’s desktop. even if you make apps for the main mobile and “pad” systems, it won’t reach a lot of people, and especially the desktop. Instead, appeal to normal search behavior and live inside their browser. Or do you prefer deliberately reaching only a small percent of the market?