Category Archives: Design

Making your website responsive ≠ great usability!

Posted on by
Reply

stack_of_blocks

 

 

 

Aah – responsive web design – that great technique that allows the layout of a web site to adapt to the viewing environment.

 

 

If you view the site on a normal large screen, it looks good.
On a tablet, still looks good.
On a smartphone – still looking good.

BRO_ResponsiveDesign_BostonGlobe

None of the page elements are lost, they just get moved, or stacked, without becoming teenie tiny, to fit the screen they are displayed on.

It’s promoted as “providing an optimal viewing experience” and as being “a must for tablets and mobile devices”.

It’s all wrong

Well, my friend, I am here to tell you that as good as “responsive web design” might be, you still need to think about what people use your site for before you make it an “optimal viewing experience”.

Case in point (or “let me give you a real-world example”)

I live in the wops (also known as “middle of nowhere”, “the other side of the black stump”, “the back of beyond”).

That, combined with the fact that the house I live in has no telephone lines, means that I need to get my phone, and Internet, through a wireless broadband connection.

The homepage, of the company that provides this service, is a wonderful thing, and the top of the page displays pictures and promotional messages. If you scroll down the page, there’s more information on the products the company offers, along with a list of FAQs on the right side of the screen.

browser -1429703304606 - full - fade

Under the FAQ’s, the “network status” is displayed. This shows if there are any problem with the networks. It’s tucked down on the bottom right of the page, and you have to scroll down to it. No big deal. If I can view the web site, then I know that the network status is all OK.

If I can view the web site, then I know that the network status is all OK.

The site uses responsive web design. This means that all these page elements “stack” in a way that allows for that “optimal viewing experience”. On a smartphone, all the information is sill accessible. This is a wonderous thing, and butterflies and doves take to flight…

However, consider this…

When there is no problem with network, I work happily away online, and the company’s website is the last place I tend to go – I already have their product.

I want to check on the status of the networks. And do you know where I can find this? At the bottom of the responsive “optimal viewing experience” site.

When there is a problem with the network, I can’t get to anywhere on the network.

So I switch to my smartphone, and use the mobile network to open up their site. Do you think that I am interested in their products and services. No! I want to check on the status of the networks. And do you know where I can find this? Three quarters of the way down the responsive “optimal viewing experience” site. And to get there takes time… Not a lot I admit (when compared to a tree growing), but it still takes time, and makes that user experience a very poor one.

Here’s a image of the web site when viewed on my phone…

When viewing on a smartphone

Does it give me the sensation of an “optimised viewing experience“. No.

Several smart people at this communication company have clearly sat around a table, and decided that responsive web design is what they need. Or a web design company (in this case a “web design, app development and online marketing” company), convinced the them that “a responsive web would be really cool and if they didn’t have one, small puppies would start dying“.

This is where responsive web design is a Fail

Having one web site that is displayed nicely on all devices sounds like a great idea. There is only one set of code that needs to be maintained, and when content is changed, it only has to happen in one place.

The big thing, however, that promoters of responsive web design miss is that people have different needs when they view information on different devices. As shown in the example above.

What should be done.

The number one thing that should be done when redesigning a company website is …

Talk with the customer!

Find out what the user of the site are actually looking for when they view your site.

This can be done through a number of ways:

  • focus groups – talk with the customer
  • personas – create “categories” of users, each with its own reason for visiting the site.
  • surveys – talk with the customer
  • actual historic data – server logs, site statistics, etc. – see what the needs and uses of a customers have done in the past

Note – talking with the customers doesn’t necessarily apply to the “design” of the site, but more to the content used/information required. (Check this article out) 

Other useful articles

  • Meet Content – Web Focus Groups: Know Your Users, Know Your Content
  • Digital Current – Focus Groups: Marketing’s Oldest Technique Adapts To the Digital Age
  • WebPageFX – Website Focus Group Studies
  • Smart Insights – Web design personas
  • Step Two Designs – An introduction to personas and how to create them
  • JohnHaydon.com – How To Create User Personas for Your Website
  • Google – Google Analytics

Create a separate site that is especially designed for a mobile device

Yes, yes, I know that his is going against the current glassy-eyed trend. However, if you consider that needs and uses of smart device users is different from PC users, then it makes sense to have separate sites.

There is no need to make the entire site portable.

Responsive sites are, in the vast majority of cases, thin long versions of the desktop website, with the same amount and type of content and functionality that is optimized for the computer experience, not the mobile device and connection. There is no need to make the entire site portable. In the example given above, as a smart device user, I don’t care about the companies products.

Make a specific app.

Creating an app has its benefits. An app is generally dedicated. Because it is something installed on the device, it can take advantage of the phones hardware. As a result, better functionality.

And its something that the user wants (otherwise it wouldn’t be there).

However, the same principle applies here, as it does for a web site (be it responsive, or separate) – find out what the company wants. The company mentioned in the example above have an app that still does not provide me with the information that I want…the status of their networks.

More resources that are of value:

  • Worry Free Labs – Should Your Company Build a Responsive Site or a Separate Mobile Site?

Test, test, measure and test

During the process of designing the site/app, constantly run usability tests. Get feedback from “real” users. Make sure that what is getting made is what is actually wanted.

After the site/app goes live, keep testing…is it meeting user’s expectations? Is there room for improvement?

Measure the use of the site…there are several measurable metrics that give you valuable information how the site is being used.

Have a look at these resources for more information:

  • Nielsen Norman Group – Articles on Testing
  • Measuring U – Usability Testing & Analysis
  • Nielsen Norman Group – Articles on Metrics
  • Usability Net – Test & Measure

 

Conclusion

Whether you decide to have a separate mobile site, a responsive site, or an app….do your homework, and make sure that it is offering value to the user.

Otherwise, it’s just a waste of space, money, and time (yours and the customers). 

Useful Resources:

  • 10 PDF reports to learn about usability
  • The Truth about Responsive Website Design
  • What should I think about when working with a developer?

 

Related articles
  • Ten tips for great usability on a business website
  • Looks vs. Function (usability, comfort). Which would you choose?

Don't forget's! when designing for the Web

Posted on by
Reply

HQ have put up a great presentation on Slideshare, It that encapsulates some very important factors that must not be forgotten when designing for the web.

I encourage you to have a look…

Related articles
  • The 7 Principles of Conversion-Centered Design
  • User Experience: Remember, when it comes to UX, the U comes first.
  • Empathy for the User: UX Design Secrets from an Expert
  • Photography in UX design
  • Top resources for learning UX Design

My short rekindled love affair with Microsoft Paint

Posted on by
Reply

MS_Paint_Icon

Yes, I am not ashamed to say it, but I had a short-lived affair with Microsoft Paint.

 

My first love

Back in the heady days of Windows 3.1 (if you can remember it, you were never there), I was a big user of Paint (or Paintbrush, as it was called then.) It was cool to be able to create works-of-art.

 

Love Lost

As I started finding my way in the world, I started using Paintbrush less, and less. I was never a graphics designer, and didn’t really need to use such tools. At most, I needed to be able to take screen shots, and manipulate these if necessary (things like trimming unwanted parts out, slicing sections out of the middle, adding text, etc.). For this I found Snagit to be an excellent tool.

Snagit is my door

 

New Worlds

Then I moved into the world of Business Analysis, and wire-frames, and mock-ups. If an existing system needed changes to the user interface, it was often necessary to be able to demonstrate what the interface would look like once the changes had been incorporated.

granitesteps3

Love, rekindled

I had started a new position at a financial company, and my beloved Snagit was no longer available. I was required to document web site/application changes, and what did I have available…Paintbrush, (or as it was now know, Paint). “How can I work like this!?” I screamed to myself.

screaming-calvin

 

Having no choice, I started using this infantile tool. And, you know what? I was amazed at what I could do. Once I got the hang of it, I could easily paste in a screen shot, trim out unwanted elements, move elements around, even replace text. (This last one was not straight-forward – it involved getting the new text to look like it was the same as the old.) I quickly became a MS Paint advocate.

Love

It didn’t last long

This adding the next text bit, however, got me frustrated. it was clumsy, and required a lot of fart-arsing around.

That’s when I discovered what I could do with a browser’s Developer tools …

…to be continued

 

"Why is no one responding to the poll?" … Cause we don't know where the friggin thing is!

Posted on by
Reply

frustrated-mobile-user3-1

Currently in Auckland, NZ, there is a scandal involving the Mayor. I won’t go into the details, except to say that he suffered from a weakness of the flesh, and misused the privileges that come with his position.

This morning I was listening to the national talkback radio station, where the talkback host was discussing his opinion on the Mayor’s activities, and stating that 96% of people want the mayor to resign. This was based on a poll that was running on the radio station’s web site. The host kept prompting people to go and vote. And then lamenting the fact that hardly anyone was.

poll results

After a commercial break, the host stated that to get to the poll, you had to go to the home page of the site, and click on the video of the mayor. This would open a new page, and the poll was there. Then after another 10 minutes the host said that the poll was actually down at the bottom of the page, on the right, nested between a section on “latest audio”, and an advertisement.

This evening I examined the home page. I couldn’t see any video about the mayor. So I tried to find the poll using the site’s search facility. After grinding away for what seemed like a long time, a list of Google sponsored results (that had nothing to do with the radio’s web site), was displayed, and then, after a pause, pages and pages of results… How the fudge could I find what was relevant?

So I did what most people do…I left the site, went to Google, and searched from there. Using the same query, Google responded in a fraction of the time, with, at the top of the list,  the result that I wanted. Namely the page with the poll. And sure enough, it was way down the bottom still showing the same results from the morning.

Here’s a screen shot of the web site…

lenbrownpoll

See how the poll is way down near the bottom of the page?! The yellow dotted line is where I could see down to on my PC screen (1600×900) without scrolling.

Even on a smartphone, the poll isn’t obvious…

web site on a smart phone

The talkback host was using the poll, and the results from it, as a main talking point in his show. And he got quite annoyed when he noticed how difficult it was to find the poll.

I revisited the home page. In the top right of the page was a carousel, showing a repeating set of 5 captioned images. There was a delay between each image.The fifth image was one that led to the page where the poll was. If you didn’t know that the 5th image was the one that you wanted, and you visited the page at the wrong moment, and decided to move on, you would miss it all together.

This raises some important points with regards to usability…

  • Always check to see what your public will see. The host was probably looking at the raw data from the poll, or a dedicated results screen. He had no idea what was on the public-facing web site.
  • Think about the layout of the elements on the screen. What’s important? What’s not? And don’t just think you know what your public/users/etc want, or how they behave. Go and find out. Don’t just ask your colleagues, or the managers! Go and talk with real people! In the real world.
  • Find out what type of audience you have. Why are they there? Are they just browsing, or are they three for a reason (like trying to find the poll that they were told to participate in). Don’t have a flippin’ carousel that people have to sit and wait to see what’s on there. If you do have a carousel, have one that allows the users to see the main items in a summarised form.
  • Find out the environment. For a talkback show, in the morning, most listeners will be travelling to work,or cleaning the house, or looking after little ones. This means that they will use, most likely, a mobile device to visit the web site. if that’s the case, put the friggin’ poll in an easy to reach location!

Of course, these two points do not even cover what is involved with usability. Having had a look at the station’s whole web site, I could mention a whole slew of things that could be better. However…that would need a whole separate blog post…

Related articles
  • Nothing builds user rage quite like bad mobile usability (talentopoly.com)
  • Weekly Web Search: Usability 101 (albert813.wordpress.com)
  • Usability Testing Analysis (prestonjoelhughes.wordpress.com)
  • Website Usability Review (firstdigital.co.nz)
  • On the carousel experience (webimprovements.wordpress.com)

Should we brand our Intranet?

Posted on by
Reply

IntranetLocation:    LinkedIn SharePoint Users Group
Date:           2 days ago
Situation:   Jodi Stevens, a Web Content Specialist” put a question to the group…

 

Just curious how many brand their intranets beyond the basics like changing themes?

 

At the time I read it, there were already two responses. I added my own…

It’s an interesting discussion – whether to brand, or not.

With regards SharePoint, Microsoft’s Jeff Teper – senior vice president for SharePoint, advises…

“Use SharePoint as an out-of-box application whenever possible — We designed the new SharePoint UI to be clean, simple and fast and work great out-of-box. We encourage you not to modify it which could add complexity, performance and upgradeability and to focus your energy on working with users and groups to understand how to use SharePoint to improve productivity and collaboration and identifying and promoting best practices in your organization.”

However, and this is something that Dan Adams touched upon, you need to think about the purpose of the Intranet. Is it just a file-share-replacement? or is it a focus point for staff members to learn about the company, about each other, as well as to engage them and to foster exchange of ideas?A “branded” intranet, if done properly, can achieve the latter. I say “if done properly” because a “hack-job” can result in a something worse than a plain vanilla install. To do it properly, it is essentially to have, not only developers who know what can be changed without breaking something, but also a designer with UX/UI skills. These make for a very pleasant user experience, and one that helps the intranet align with the company values, as well as being somewhere that people “want” to go to when they turn their computers on first thing in the morning.

At the same time, a good Information Architecture (IA) helps, enormously, with usability and findability. Often, when an intranet is created, items and content are put into places “that make sense…at the time. Then as more things are added, they are placed either “where it makes sense for the person adding it”, or a new grouping is created. As time flows forward, the intranet becomes more and more complex. Having an IA that is usable, as well as maintainable, requires a lot of work, but can make a big difference to the system.

The Intranet can also act as a file share replacement. There are many benefits to this. Being able to label content as well as apply extra metadata to it, adds considerable value. Content can be grouped more effectively, and can be surfaced (through search functionality) in a way that has more meaning to the end-user. However, here also, great care must be taken. A suitable taxonomy should be created, as well as a way that allows content to be correctly labelled. Otherwise you end up with the original file share – just in a different format.

Underpinning all this.. some form of governance is important. This is what ensures that the intranet remains that great place that it started out as, rather than degenerating into a complex, tangled bog of despair that people use because “they have to”.

Related articles
  • Is Your Intranet Social (And Do You Really Want It To Be)? (business2community.com)
  • Employees shrugging off your intranet? It’s probably the platform (holtz.com)
  • The SharePoint 2013 Intranet: Pros and Cons (cmswire.com)

Hand drawn – Alive and inviting

Posted on by
Reply

In an earlier post (The Power of Comic Books!!) I talked about an interview with a Keegan Lannon, a Phd student studying the value of comic books. This was accompanied with a video of the interview.

In the video Keegan states “the more abstract a comic is, the more the person can relate to it”.

Abstract-relate

Interestingly enough, a couple of days later I stumbled across an interesting piece that validates this. In Rough and Hand-drawn: Alive and Inviting Tom Benthin talks about how, when compared to computer created images, “more abstract drawings of people allow us not just to imagine that a drawing is real, but that we are in it”.

This translates, as well, into techniques that are used for analysis and design work.  When you either try and describe something to users, or try to draw out of them details on processes etc, a roughly drawn picture can be used.

An example of a Use Case Model

 

Related articles
  • How Digital Comics Change The Way Comic Books Are Drawn – And Imagined (gizmodo.com.au)
  • 26 Ways to Use Comics in the Classroom and 5 Free Tools for Creating Comics (freetech4teachers.com)

Information Architect (also known as “The Bridge Builder”)

Posted on by
Reply


Peter Morville described an Information Architect as a “Bridge Builder” in his Information architecture and findability column from August 2008.

He expands on this with the following:

An information architect builds bridges between:

  • Users and Content. We design search and navigation systems that connect users with the content and services they need.
  • Strategy and Tactics. We translate abstract visions into well-grounded, actionable blueprints for design and implementation.
  • Units and Disciplines. We facilitate cross-functional collaboration using boundary objects (e.g., wireframes) to start conversations.
  • Platforms and Channels. We sketch maps for new services and experiences that span multiple platforms, channels, and media.
  • Research and Practice. We use the scientific method, heuristics, analytics, user research, and ethnography to inform our designs.

You can read the full post here

.

Related articles
  • The Future of Information Architecture
  • Some Generalizing about Specializing

More things I have learnt from the world of secret agents.

Posted on by
Reply

In my last “things that I have learnt from spies” post I talked about the British TV series “Spooks” and the US TV series “NCIS”, and how we can learn something from them. At that time, it was to do with “teams“. In this post it’s to do with “intuitiveness“.

So there I was – I had just put Disc 1 of the first season of “Spooks” in the DVD player, and some sort of “intro film” started playing with a shady character breaking into (I later discovered) the MI5 headquaters.

The film was quite interesting and really sets the scene for the program. After breaking in, the character goes to a desk, and starts typing on a keyboard to override security systems, as well as checking for confidential information. Then he waits, and types in more codes.

After watching this for about 10 minutes, I thought that there was something wrong. The character just kept repeating the same actions…type secret codes….look for stuff…watch the monitor…type more secret codes, etc. All with some really cool “spy thriller” background music.

Turns out that I was at the “Main Menu” screen…By pressing the “Up” and “Down” arrows on the remote control I was actually moving between items on the desk on the screen that represented different menu options. Once I worked this out, I was able to actually start the program.

The “”intro” screen was actually pretty cool, and really fitted with the whole “secret agent” theme. However, it just wasn’t “intuitive”.

In the DVDs for the next series they had added menu descriptions.

Related articles

Momentum – another year – another set of announcements

Posted on by
Reply

As mentioned – I didn’t get a chance to go to Momentum in Berlin this year.

However I was able to get a pretty good idea of what was covered thanks to the great streaming video that EMC had, as well as the great tweets that be “tweeted”, and the excellent blog posts that were written.

I’ve been to a few Momentum’s now, and while they are a great opportunity to really “talk” with the EMC people, and their partners, I always had the feeling that the things I heard, I had, more or less, heard at the previous Momentum, or that what was big one year, suddenly falls to the wayside.

Now I realise that changes to strategy get made all the time, and that new technology takes more than one year to design, develop and integrate, and it’s great to see that EMC is: a) responsive to changes in the market environment, b) keeping its customers well informed of the progress that they are making, but to mention a few examples…

  1. Centerstage – in 2009 this was being hawked as the new Documentum interface. Now where is it?
  2. XPlore – really glad to see that EMC have been busy with their own search engine. And I have been following this with interest. However has there been anything new over the last couple of Momentums?
  3. SharePoint – also really interested in this but, again, are we hearing anything new with regards to the EMC offering for integration with SharePoint?

It wasn’t until I spoke with a colleague, who made a similar comment, that I started to really think about this. Then I saw this tweet from Jed Spink that I realised that others also had the same thought.

I appreciate that my view might not be a perfect one, and that there might be situations where I am wrong.

I want to hear what you think? Am I right? Or am I totally wrong?…

Related articles

The importance of Real testing

Posted on by
Reply

testing acceptance development QA

I was involved in a project for a client once that involved running some updates for a SharePoint-Documentum connector. (The connector was essentially a protocol handler that allowed SharePoint to index documents in a Documentum repository, as well as ensuring security was honored.)

The tech guy doing the upgrade had worked many, many hours. The job itself was not complex, but the server on which the application was installed was also used for other things and so, there were starts and stops as others demanded their own slice of time to do maintenance on other apps running on the system unabated.

Finally Techguy had finished the upgrade. He set up a brand new content source that pointed at the repository, and had generated the correct list of crawled properties (these were generated from the Documentum database). Security was also working fine (the connector translated the Documentum security into Active Directory groups/users).

Techguy ran a crawl of the Documentum repository, and checked that there were no errors. Everything looked fine. He performed a search in SharePoint. Yep, the documents were being returned OK. He did further testing, by physically eyeballing a document in the system, checking the content, and then doing searches on various metadata, as well as content searching. Yep, system worked well.

Techguy even performed Regression Testing, following a scripted Regression Test that he had written. It went through the whole shabang of creating a document, sending in for review, getting it approved, changing the status of the document back to draft, making a modification, again for review, again for approval, until the document was effectively a usable document. Everything checked out beautifully. Techguy proudly confirmed that the system was working fine.

The the users were allowed back onto the system. Within hours tickets issues were being lodged. It seemed that the documents that were being returned in a Search, were not opening. The user would click on a search result, and get greeted with a page not found error.

Techguy was called back in. He started looking at the system. Everything looked OK. He was told to look harder. After much scratching of head, and flicking back and forth between various screens Techguy looked up. “I forgot to set up the web service address properly”.

It turns out that SharePoint was able to communicate with the Document repository OK when it came to doing the indexing, but when a request was made to open a document from the search results, a different mechanism was used. If the address of another server is not correctly entered, then a big fat nothing happens when a user clicks on a search result.

Techguy was just that – a tech guy. He was also a user of the system, but when he wrote the regression test document, he was a tech guy. When he did the upgrade he was a tech guy, and when he did the testing he was a tech guy. And as a tech guy he had focused on the technical side. He had made sure that all the main knobs had been turned, he had made sure that the process of indexing was working fine. He had even made sure that the system was returning search results as expected. The one thing that he hadn’t done was to try and open one of the documents that was returned!

Techguy’s oversight raised a very important point. As well as technical guys doing technical testing, end users are also required to do end-user testing. – because the end user does stupid things that the technical people never expect…they actually use the system.