Habañero User Experience Blog

Opening native map apps from the mobile browser

jallan — Fri, 02 Dec 2011 01:01:40 GMT

As mobile devices grow in popularity towards being the most common way people access the web, so does the desire of both business owners and developers to leverage the devices’ new capabilities. Often this comes in the form of an application, but with the advent of responsive design and improved mobile browsing it is taking place with increasing frequency in the browser.

One of the most obvious and useful features to employ in the mobile context is location finding. All the most popular mobile platforms have the ability to determine their location, often to within a few meters. This can be useful in many ways, but let's look at a relatively simple use, getting from where you are to where you want to be.

Picture this. You are downtown waiting for your friend to finish work, sitting in a small cafe, surfing the web. You just landed on the website for a great new store and you want to check out. You can see from the contact page that the downtown location is on Granville Street but you're not sure where it is, how far it is from the cafe, or if you have time to get there and back before your friend gets off work. Now, as a mobile savvy user you know you can copy and paste the address from the website into the search bar of your map application. While certainly achievable, this can be an annoying task. What if you could simply click on the address and have your map application open displaying a route from your current location to the store? To me, this sounds like the ideal interaction! Is it possible?

The answer is yes. Well really the answer is “yes, but...”. The iPhone is the only platform on which I have created the desired experience of a single click taking you straight to the directions. On the other devices I was only able to plot the destination. The user then had to switch to the ‘directions’ view manually to plot their route, but even this is light years ahead in terms of user experience from having to copy and paste anything.

So, how do we make this work? First, let’s start with a default behavior that will give desktop users the information they need by linking to Google Maps. Our example location will be:

Zelen Shoes
894 Granville Street
Vancouver, BC V6Z 1K3

URL Structure

To find this location on the Google Maps website you’d need a link like this:

iPhone

The good news is that an iPhone would actually hijack this URL and open the map app automatically. But it would not plot the route. To plot the route we’d need to modify the URL to:

Here we are setting the source address to “Current Location” and the destination address to our store. If you’d like more information about constructing query strings for Google Maps take a look at http://querystring.org. In my experience anything you can do with them on Google Maps will work in the iPhone app.

Android

Instead of simply hijacking URLs to Google Maps like the iPhone, Android is employing the geo: protocol which relates the specific intent to find a geographic location. This may or may not be a better approach, we can leave that debate for another day. Here, let’s just talk about how to make it work.

Unfortunately the current implementation of the geo: protocol on Android devices does not give us the ability to request a route but it will let us plot our destination map. From there we can use the ‘directions’ feature of the application to view our route.

For information on the geo: protocol and other ‘intents’ take a look at the following link. http://developer.android.com/guide/appendix/g-app-intents.html

Here is how we’ll construct our URL for Android.

<a href="geo:894%20Granville%20Street%20Vancouver%20BC%20V6Z%201K3">Find Us</a> WP7

Windows Phone 7 and the IE Mobile browser use another protocol, the maps: protocol. In fact, iPhone and Android will also respond to this protocol, but in my tests the iPhone did not respond to the Google Maps parameters outlined above which means you can drop a pin, but not plot a route. Android is limited to this functionality even when using the recommended geo: protocol so really we could use the same maps: URL structure for both Android and WP7. Again, the user has to switch to the ‘directions’ view.

BlackBerry

BlackBerry is definitely the odd man out in this scenario as it requires JavaScript instead of simply responding to a protocol or URL.

You could apply the following function using event handlers from a JS file but for this example we’re going to apply it inline so we can see how the structure compares to the other platforms.

I have only tested this on one BlackBerry and I am not sure if all models support location finding or this JavaScript. One thing I did notice in testing is that it validates the address. I had entered an incorrect postal code for one test and I got an error saying the postal code was not valid. It was in a valid format but was not an actual postal code.

URL Overview

I should mention at this point that I am trying to achieve our goal in the simplest possible manner which is through a straightforward, familiar, hyperlink. There are some more complex approaches which involve generating KML files or accessing various mapping APIs but I wanted to rely as heavily as I could on native functionality for three reasons. First, the interface will be familiar to users. Second, I have never seen a custom map solution which worked as well as the native apps. Finally why would we spend time and money developing a custom solution when a perfectly good one already exists.

Default

iPhone

Android

WP7

BlackBerry

Making it work

I won't be going into detail in this post about how to implement this on your site but I will give a basic outline of one approach using JavaScript to rewrite the URLs.

Setup your links using the default URL scheme pointing to Google Maps.
Use JavaScript to determine if the user is on one of our targeted platforms by analyzing the user-agent string.
If a target platform is being used to extract the address data from the existing URL and construct a new URL, use the models described above.
If the user is not on a targeted platform leave the URL as is.

Conclusions

Hopefully, one day all browsers whether mobile or desktop will conform to a single URL structure or protocol for opening map sites and applications, plotting routes, performing searches etc. Until that day, and I wouldn't hold my breath, we’ll have to target individual platforms if we want to make address information more useful by linking it with map applications and websites. What would be even better than a protocol or URL structure is if browsers allowed you to define a default map service and then parsed the page source for microdata as described on microformat.org or schema.org. Semantics and functionality!

As my next contribution to this blog I plan to build a jQuery plugin to handle these rewrites automatically, so stay tuned. Also, this article is by no means exhaustive so please feel free to post your ideas or comments and we'll see if we can't make this the definitive guide to opening native map apps from the browser!

References

Microformats: Schema.org
Microformats: Microformats.org

Extranets: the overshadowed sister solution

moconnor — Sun, 27 Nov 2011 03:23:05 GMT

Recently my colleagues Brian Edwards, Barbara Richards and I did a presentation on extranets in partnership with Microsoft, “Building Deep Relationships with Microsoft SharePoint Extranets”.

It was an insightful experience for us to pull together our thoughts about the often overshadowed member of the internet family. There’s plenty of documentation about websites, intranets and line of business applications… but extranets? Not really a well documented topic! Websites can convert leads, result in sales, influence decisions...intranets can engage employees and improve productivity. But extranets? It seems extranets are the overshadowed sister solution.

We’ve built extranets in a several different ways, on various versions of SharePoint for many business purposes, such as training delivery, franchise communications, professional development networks and enterprise collaboration. By looking at our experience with these solutions, we were able to articulate some of the basic but under-documented extranet fundamentals:

What are extranets? Who are they for? How do you know you need one? And... how can extranets improve your relationships?

What are extranets?

An extranet can be almost anything you want it to be, but as a rule of thumb:

They resemble intranets
They are secure... sometimes more so than intranets
They generally serve smaller audiences than websites
They resemble websites
People outside your organization can access them
Brand is usually important (if not critical)
They are usually used by partners, vendors and suppliers (but can also be a subset of clients)

This leads nicely to our next section...

Who are extranets for?

Our business relationship landscape varies in complexity. These are the type of audiences extranets are typically aimed at — they’re people you and your organization need to work with and who need information that needs to be secured (otherwise it’s just a website).

How do you know you need one?

Memory sticks, Google Docs and Drop Box have become enterprise applications.
You need a spreadsheet to keep track of which partner uses what system.
You'd rather not think about all the places your corporate information is living.
People at your help desk can predict a lot of the calls they receive.
You hear that people sharing a certain role or expertise need to be more in touch with each other.
For fun, team members guess at how many copies and versions of the same document are out there in email.
You have an inkling that it could be easier to work with you.
People tell you that it could be easier to work with you.

How can extranets help improve your relationships?

As you move across this diagram from left to right, you can see how an extranet can be used to support increasingly complex interactions. A well-crafted extranet can provide a unified brand experience between all potential touch points, such as a public website or an employee intranet.

Hopefully this summary helps your organization better understand your extranet needs and identify whether there’s an opportunity for you to deepen your relationships with this type of solution. Feel free to follow up with us if you’d like to talk more about how extranets have worked for our clients and how they could work for you.

Sketches, tape and scissors: a participatory design workshop

marmstrong — Sun, 30 Oct 2011 06:51:37 GMT

In order to create an exceptional experience we need to engage users and stakeholders throughout a project. There are many tools and techniques that we use, from interviews to usability testing. I thought I would take you through one of the tools in our toolbox — the participatory design workshop.

Each workshop we conduct is customized, based on the goals of the project, unique circumstances and participants. For example, when I was working with a group of users to better understand the way they work in teams we asked them to design a website page that would help their team better accomplish their goals. Because this SharePoint collaboration portal was to be 'out of the box' with little custom development we were able to provide the users with a representative Web Parts to get them started.

The session began with introductions, the six participants were asked to introduce themselves to the group and describe what they do, who they work with, how they currently accomplish their day-to-day tasks and communicate with others.

For the activity we asked participants to think of an existing or past team/project as it would help them consider the business processes involved and specific team challenges. We then provided them with sketches of an empty browser page, pre-cut sketched tools (Web Parts) and the following instructions:

Designing SharePoint Collaboration Templates

“The year is 2011 and Company xvz has a new system for communicating, creating, sharing and storing information.

Think about your team, how you would like to be able to work with them. We have provided you with a variety of tools that can choose from to make your work-day more effective. This is not an exhaustive set of tools and are provided to get you thinking about what is possible, if there is some other ability or need that is not represented – flip over one of the web parts and design something new!

Once you have all of the pieces you think you would need arrange them on the page.”

select your Web Parts
add anything that is missing
arrange them on the page according to priority
detail titles such as libraries

Design time

Workshop participants had 40 minutes to put together a page that would help their team work together more effectively. As facilitators we were able to talk to the participants one-on-one. To find out more about their particular team and encourage them to put as much information down on the paper as possible.

Design collaboration

After taping all of the pieces to the page each participant described their team and the tool they envisioned to help them better achieve their goals to the rest of the group. This was a great way to engage discussion. Participants could see how someone else solved similar needs and discuss multiple and different applications of a similar tool.

Tell us more

After a discussing each of the designs, we asked the participants to detail their designs, add the functionality they liked in other designs to theirs and provide additional information about the team and its purpose/goals and challenges.

The little things that helped make this an effective workshop:

1. Sketches

The sketches were a big hit, they were approachable, and participants weren’t afraid to scratch things out, add titles, or move them around. They didn’t have to commit to anything until they tapped them onto the page at the end.

2. We gave everyone multiple pages

Although most people didn’t use more than one sheet it took the pressure away from getting started. If they goofed they could always start again.

3. Use permanent ink

We only provided ink pens, this way participants didn’t get caught up in the details and we could see their thought process (what was crossed out and rethought) which provided a great discussion point… and fun!

The technique worked so well we've added it to our workshop toolbox!

Designing a responsive website

ader — Fri, 28 Oct 2011 23:18:27 GMT

Although quite new, responsive web design is becoming something revolutionary. If you haven’t heard of it, responsive web design refers to a fluid website that responds to the size of the user’s browser or screen. In the future, this may reduce the need for a dedicated mobile site.

We experimented with responsive web design on our User Experience Done Right! course site and learned firsthand some of the challenges that come with designing a responsive site. (Note: The responsive web design portion of the site is disabled for Internet Explorer 6 – 8 because the browser does not natively support it.)

There are no standards yet

Standards are important for web designers. What are users accustomed to seeing? Utility navigation items on the top, clicking on the logo takes you home, etc. Since there are no standards for responsive websites, the majority of the process involved putting myself in the shoes of someone visiting the site. Would I be surprised if a button looked one way on one screen, and on a different sized screen looked entirely different? Yes, as we don't want to give users the element of surprise every time they resize their window. All elements must stay consistent with the original design. That was something I considered throughout the design process. However, I do expect new standards to emerge as responsive web design is implemented on larger websites.

Mobile versus desktop

This was a big factor to consider when designing for a screen resolution over 1024 pixels in comparison to a resolution as small as 300 pixels. When mobile first came out, we were all quite adamant that the mobile experience is different and should look different. But should it?

I looked into many different responsive websites and yes, the small screen designs are different, but they've evolved from the original Apple-inspired mobile design.

Mobile designs today look a lot more like websites — same look, functions, but with a different hierarchy. We can reorganize the content of a website to enable people using a mobile device to find the information they need, however, we need to consider what is it that the user is likely searching for when they're browsing on a mobile device? Would they be browsing or are they on-the-go and in a hurry to find what they need?

It was an interesting process thinking about how the browser screen would affect the elements on the page — figuring out when certain design features would move and when they should get smaller. There is a threshold when the original design layout doesn't work for the screen size and we needed to move to a navigation style that better fit the small screen and we needed to stack the content.

User Experience Done Right! is a website where people need time to think before they make a decision — they need to read about the course and check out the course dates. As such, the design was focused on informing the user rather than being transactional. The website uses Eventbrite for registrations, so it wasn’t seen as a primary action for the mobile experience. It is likely visitors will read about the course, think about it, go home, and register from their home computer. All sites have a different purpose, but this is how we designed the small screen experience for the User Experience Done Right! site.

Designing for a small space

Unfortunately, smartphone screens and resolutions aren’t standardized. Yes, the easiest solution was to stack the content, but the navigation had issues on its own. It had to be designed for the small screen and have some design consistency with the large-screen versions of the site. We originally made them simple links but then noticed that the links and the tabs in the original design are different. Thus, we created a different style tab to suit the small screen. We also muted some of the design elements, such as the tabs and the upcoming locations. We didn’t want to distract from the content and have an unbalanced design.

And so…

We had to learn what is possible, what doesn't work, and what could be. Responsive web design is a great new challenge for the digital world. It only makes sense to evolve web design alongside technology and responsive web design is the first step.

Read one of the first articles about responsive web design.

See also Habañero User Experience Developer Chris Parson's article Improving Page Load in UEDoneRight.com.

The social side of intranets

brichards — Wed, 26 Oct 2011 23:50:09 GMT

It’s been fascinating to see how our clients are beginning to use the social tools on intranets. They’ve gone from unusual to usual to usual with our clients in just a few years.

I’ve also had the chance to listen to some really insightful people speak about social intranets lately. One of our clients, Heather Harmse of Vancity, recently spoke at VanUE about her experience supporting and promoting the use of social features in Sharepoint 2010. (You can also read about Vancity's intranet on our site.)

I also attended the Social Intranet Summit here in Vancouver last month and it was a real treat to be able to listen to the thoughtful perspectives of people who design and manage the social side of intranets.

Here are some thoughts and themes that have stood out.

The term “social intranet” is confusing

I don't think the term “social” really captures what a social intranet is about. It sounds more like ‘chit chat’ than supporting people across the organization to connect, communicate and work together (which is more what it’s about).

Plus, we’re using the term to refer to relatively new social tools like blogs, micro-blogs, wikis, profile pages, comments, and ratings. But a lot more things are also social. Email, telephones, bulletin boards, and spaces to have meetings and work together are also social.

There are some very compelling reasons to support the use of social tools in organizations

The best reason I’ve heard to make intranets more social was pointed out at the Social Intranet Summit this year. Almost everything someone needs to know is known by another employee. That’s a pretty good reason to use tools that help people find, share and communicate with each other.

Heather Harmse is often asked if she's concerned about people conducting themselves appropriately on Vancity's intranet (the intranet is open for anyone to comment on pages). She points out that we spend so much time hiring the right people and then trust them to manage their time and resources. Shouldn’t we also be able to trust them to behave themselves on an intranet? Also, on intranets people are not anonymous, which means people only say what they are willing to associate themselves with.

Other reasons to support new social tools on intranets:

The use of new social tools outside of work will continue to grow and more people will become proficient in using them and expect them.
Social tools like Facebook, Twitter and LinkedIn are effective ways of staying current with what your friends and acquaintances in different cities and countries are doing. I think they have the potential to be be equally effective in staying current with what is going on with your work colleagues across different departments, offices, or cities and support the goal of employees being and feeling informed of what’s going on.
I’ve heard some people say that they think social tools have the potential to be more interesting at work than away from work because people have a wider area of common focus.
A lot of effort goes into creating news to keep employees up-to-date on what is going on in a company and I wonder how much news could be reduced in an organization where micro-blogging is common.
The potential to improve search and findability and surface the right information. Search is a perennial issue on intranets. I think one of the most promising ways to make search and findability better is through using social features, like ratings, page views and comments to surface information, which takes into consideration the people you share things in common with. This would include people that share a role or department, but also people whose profiles you are connected to, who comment on similar things to you, have similar ratings, and visit or use similar pages. The reason Amazon’s book suggestions are good is because they show you books from people who share your taste and interest in books. An intranet that is social will have more ways to show information to you from people who share your interests.
The potential to improve the quality of content. Keeping content up-to-date is another issue that exists on every intranet. This is often partly due to content owners not knowing what people find useful and where to focus their efforts. Employees being able to rank, comment or publicly bookmark pages is a great way to motivate authors to invest time in that content.
Supporting employee engagement and the positive aspects of a company’s culture. I don’t think intranets really create employee engagement where it doesn't already exist, but where it does, social features can support it and other positive aspects of a company’s culture.

There are some very valid concerns about making intranets more social

This is a topic my colleagues who also attended the social intranet summit will be blogging about soon, so I’ll just cover it briefly:

Not all employees are comfortable using new social tools. How will this affect adoption, and how effective will they be if only a minority of people use them?

Employees need to know how to use the new tools effectively and guidelines and planning around this are essential.

A big bang approach to using social tools is pretty crazy

Even if most people have some experience and comfort using social media tools, those tools are still new in the workplace, and in many organizations a majority of people will need time to get used to them. There also needs to be a culture in place to support their use. Introducing tools as pilots and within small groups is a good way to understand how they could and should be used in a particular workplace.

A supportive culture and environment is essential

Two intranets here in Vancouver where social tools are quite well-used are the Vancity and Mountain Equipment Co-op intranet. Both of these companies have unique, open cultures people can describe, value employee engagement, and have well-developed brands and clear goals. Employees know what the company is all about. So they are supported and encouraged to communicate — because people are clear what the company is about, it’s easier to know what kind of conversation and sharing is appropriate and supports the organization.

Related to the above, I also think a healthy culture is a prerequisite to a successful social intranet. Providing more social tools in a company with a culture of poor communication is, in most cases, going to create more poor communication.

Social intranets need attention and management

Getting employees to actively engage with the intranet in ways that are productive takes work. It means asking the right questions for people to answer — and guiding, supporting and encouraging the kind of conversation that supports business goals. One of the presentations at the Social Intranet Summit was about the evolving role of the community management discipline. There’s a whole discipline evolving around the managing of online communities, of which social media and tools are typically a part of. I suspect community management today is a bit like content strategy a few years ago (a solid idea whose time for everyone to know and accept hasn’t yet come.)

For more information about social intranets, here are some highlights from speakers at the Social Intranet Summit:

Social Intranet Survey 2011 - a comprehensive report on how intranet 2.0 tools are being used in organizations based data provided by 1400+ organizations from North America, Europe, and Asia.

The 2011 State of Community Management: Best Practices from Community, Social Media, & Social Business

The Social Organization - has some good metrics and lots of social media examples.

Why your intranet search is not working well and some ways to make it better

brichards — Sun, 19 Jun 2011 16:45:36 GMT

People often complain about their intranet search. It’s important to people, but it’s hard to implement effectively. Here are some reasons why your intranet search may not be working as well as it could:

Volume. As the amount of information in your intranet increases, so does the challenge of surfacing the right thing.
Outdated content. Not staying on top of outdated content clutters up search results.
The Google experience and algorithm doesn’t work well on an intranet. Google is great at finding sites that have lots of links pointing to them. This doesn’t work well on intranets because people often need something that’s relevant to only a small amount of people.
Many search engines are still not very smart or sophisticated. They are pretty literal and heavily reliant on the few keywords we give them. They don’t interpret what we really want. If I say “hiring temporary workers” to a search engine, unless it’s a smart search engine, it’s not going to take into consideration whether I’m in HR or a manager or an employee, or if I want a policy or procedure, or if what I'm looking for uses the terms “employees” or “contractors” instead of workers.
Search engines are not just plug and play and require an investment in time and technology. For search to work well, you need to understand the information needs of staff and the technical abilities of the search engine. And while FAST search technology adds many enhancements to search, it also requires people to manage and set it up effectively.
Some employees have limited search abilities. Search skills vary and some people aren’t experienced with using various search strategies to find information (such as removing and adding keywords, trying plural and singular keywords, using search scopes) and are less successful finding what they need from search than they could be.
The information landscape is complex and it’s not always clear what is being searched. Most organizations today have an information landscape that is complex and varied enough that people often are not aware of how or when various information sources are being searched (e.g. fileshares, the CMS, collaboration/team sites, other servers and applications) and miss opportunities to filter out or focus on the information they need.
It’s difficult to implement effective metadata and taxonomy strategies. A good search almost always involves good metadata and taxonomy. Think of the options to filter your search on airline and travel sites, Amazon.com, or other sites where it’s easy to find a product. These all involve good metadata and taxonomy, which are a lot of work to create and get people to use.

The good news is that your search can be improved. Here’s a list of things you can do to make your search better. Some things are unique to SharePoint 2010 search, but most will be relevant for other search engines as well.

Delete or archive outdated content. It’s not uncommon for 20% or more of intranet content to be outdated, cluttering and competing with current information in search results. Removing what you don't need from your intranet can improve your search.
Make use of Best Bets. Best Bets is a manual way of telling your search engine what should appear as a best bet at the top of search results (e.g. the vacation policy and procedures for searches like “vacation”, or the engineering department page for the search “engineers” or “engineering”). Creating a lot of best bets can be a tedious process, but doing so can also noticeably improve search.

Best Bets are easiest to use effectively in organizations where there is a high concentration in the most frequent searches. For an example, see “A best bets success story”.
Identify useful ways to slice and dice information. There are almost always parts of a site or types of content that employees should be able to focus their search on, such as policies and procedures, department sites, news, product information, regional information, etc. Use your content types and sub-sections of your site to create scopes and filters to help people filter out irrelevant information and consider the creation or use of other metadata and taxonomy (categorization) to help employees navigate search results.
Identify authoritative and demoted sites. SharePoint 2010 lets you identify important sites that should be ranked higher or lower in the search algorithm. Areas of your site you know are widely searched should be identified as authoritative, and parts of your site that store less current information or archived information can be demoted to get out of the way of more useful information.
Identify synonyms. Identify terms or acronyms that are used interchangeably and include them in the search thesaurus to help people who don’t know the right keyword to use. You do have to test these though — if over-used they can bring back too many results.
Test your search with and without stemming. If it’s on, you should get singular and plural versions of your search, as well as other keyword variants such as getting results for “engineering” if you search “engineer”. By default it is turned off for the English language in SharePoint 2010. Having it on may or may not retrieve too many irrelevant results, and having it off may or may not miss relevant things. It’s good to test it with both.
Promote the habit of descriptive and accurate titles. Good titles are important for the search algorithm, as well as for helping people identify which item in the search results they need. Make sure authors understand how page titles affect search.
Build in a way to get feedback.Provide an easy way for employees to rate or provide feedback on search results. This can help you identify best bets, authoritative or demoted sites, synonyms for your thesaurus, and content that should be deleted or higher profile in the information architecture. It can also help provide you with metrics on improvements of search over time.

Provide support for people to improve their searching skills. I often see people who would benefit from a 30 minute search tutorial on basic search strategies and tips and tricks (how keywords work, using or not using quotation marks) and generally finding information and learning about the information landscape at their organization. Consider offering optional sessions quarterly or on demand within departments so all employees are benefiting from the search capabilities you do have.
When your search is new, manually add query suggestions. In SharePoint 2010, search queries that have returned results pages that have been clicked at least six times will appear as suggestions when someone is typing in their keywords. It’s a handy way to suggest keywords that return results that have been useful to others. However, if your search hasn’t been used much these suggestions won’t appear. To support user adoption in the early days of your new intranet search, check your search logs from your old search and manually create query suggestions.
Make search smarter through user adoption. People’s use of search and the intranet can help make search smarter through the generation of query suggestions based on what people are looking for and clicking on, and the algorithm promoting pages that are frequently accessed, tagged, or rated highly.

Search is important. Employees complain when it doesn’t work and notice when it gets better. Doing what you can to improve your search is a great way to make employees like your intranet more.

Interfacing with art and design

marmstrong — Mon, 04 Apr 2011 23:18:44 GMT

This year I was invited to participate in the University of Calgary’s 2011 Santo Mignosa Scholarship Portfolio. The portfolio was originally created to honor Santo Mignosa, a former and well-respected professor, with proceeds from the sale of the portfolio funding a student scholarship that was established in his name. The tradition of creating portfolios continued as a way to replenish the funds for the scholarship. Here is how it shakes out for the 2011 rendition. A total of 24 artists, including a selection of students, instructors, graduates and established artists, each create an edition of 27 prints for exchange. Each of the 27 portfolios contains one print from each of the participating artists. Every artist who participates gets a portfolio. Of the three remaining portfolios, one goes into the University’s collection, one into a proposed major museums collection, and the other is used to raise money for the Santo Mignosa Scholarship via a raffle.

Although it is always exciting to be involved in a project like this, for me this was an opportunity to get back into a studio environment, apply my creative thinking to a different medium, and have some fun. As I started creating this print project the similarities between interaction design and printmaking became surprisingly apparent. Elegantly put, they both rely heavily on one’s ability to embrace the journey while maintaining a vision. It is really about having a clear goal, problem-solving, and taking full advantage of a collaborative environment.

The art to defining a problem involves avoiding solutions

An example that always resonates with me regarding problem definition comes from product design. I remember a professor saying: “You are not designing a chair, but a seating device.” The word ‘chair’ brings up all of your preconceived notions of what a chair is, how it works, and what it looks like. A ‘seating device’ on the other hand provides the opportunity to be creative and not be hampered by what already exists. It is a way to zero in on the problem and goal.

The same is true for interaction design and for printmaking. In interaction design we focus on the user’s goals; in fine art we are often focused on the message.

For this print project, that overall vision was captured in a sketch, which was about ‘sense of place’.

A well-defined problem can turn an unexpected detour into an asset

Sketch in hand I arrived at the studio to develop a preliminary map of all of the processes required to etch the image into the copper plate. Breaking it down into stages, each stage was aimed at accomplishing a certain goal. One was to create the line work, another was to create a background. As with technology, pretty much anything is possible given an abundance of time and resources. When you don’t have an abundance of either, creative problem solving is critical. My first challenge came with the realization that the acid was exhausted — it wasn’t etching the copper plate as quickly as I needed. An etch that I expected to take 20 minutes was taking closer to two hours. I needed stronger acid to do the second stage of the print — something I didn’t have.

In printmaking and in technology there are often multiple ways to achieve a goal. This really is both the challenging and fun part — seeking an elegant solution. It requires flexibility, room for discovery, and having a clear goal — one that isn’t defined by how you are going to achieve it or the medium you plan to use. In interaction design, the medium can be the platform or technology, in printmaking the medium may be the type of metal or process used. The medium generally has an impact on the selected approach but doesn’t necessarily alter the end goal. The ultimate goal was to create a print that addressed the idea of ‘sense of place’. The goal of this stage was to create a background to differentiate one area of the image from another. Fortunately, there are multiple ways of doing this that don't rely on acid etching into the copper plate. After weighing the options I landed on chine-collé, a process of adhering a different sheet of paper to the image while printing it. This solution overcame the constraint, established a background, and added colour, bringing the print closer to its intended goal.

Be open to discovery

Ah-ha moments don’t just come out of problems. Within interaction design it could be a different interpretation of a sketch that yields a different user interface. In printmaking it was the way I had to block out the plate to resist the acid. The dark hard-ground on the plate created an interesting use of positive and negative space. Although I wasn’t able to incorporate this into the print, I pasted it into my sketchbook to remember for the next print.

The best solutions often require collaboration

Now, etched plate in hand, I was ready to print it! Given the processes I used to etch the plate this should have gone smoothly. Alas, it did not. There are numerous small things that can affect the printing process and I had run into at least one of them. Fortunately, like Habañero’s team, the printmaking studio is very collaborative and its strength comes from the experience of the people within. Printmakers are problem-solvers and part of the challenge was trying to figure out what small thing needed to change to make it work. Harnessing the collective experience, everyone in the studio suggested solutions. I tightened the pressure on the press, tried different ink, removed the plate from the hotplate before wiping it, added linseed oil to the ink, tried different inks, etc. Throughout this process I continuously referred back to the goal to determine when I had reached it. Two tubs of ink, and eleven sheets of paper later, I was back in business.

Surprisingly, the final print is better than I had originally planned. Often elegant solutions come from searching, responding, and adjusting to a process — this is true in technology and in printmaking. And whether designing user interfaces or creating prints, I've found that true gratification is nestled in the collaborative effort of working with your peers to find creative ways of achieving end results that surpass expectation.

A huge thank you to the University of Calgary's printmaking students who shared their space and ideas, professor Bill Laing, studio technician Rick Calkin and the Fine Arts Department for a fantastic opportunity.

Best practices when using mega-navigation

jshukla — Sun, 27 Mar 2011 22:51:00 GMT

Mega menus, mega-navigation pull-downs, super pull-downs (whatever you want to call them) are popping up everywhere! We’ve been using them for the past few years at Habañero, and I’ve noticed that there are a few simple tips that help with usability.

What is a mega-navigation menu?

In case you haven’t heard of these, mega-navigation menus usually drop down from the global navigation upon hover or click and display navigation options grouped together. They range in size, but to me, these menus are “mega” when they are grouped in two or more columns. For example, check out this five column example from Starbucks:

The benefits of doing something like this are:

Task efficiency when implemented well — Users can jump to a section without going through intermediate pages and in theory, they can accomplish their task quicker. However, this is dependent on having clear, intuitive choices and a menu that performs well without too much or too little delay.
Promote content — Content owners can promote content in a menu which is then visible from anywhere (for example the product promotion on the Starbucks site.)
Better decision making — Users get a quick sneak-peek of a particular section and can decide which section has the information they need. This is particularly helpful when a global navigation system is innovative or different, and the hover helps guide the user into the area they may be looking for. For example on the Servus Credit Union website, the global navigation is structured by life stages, but this might not be intuitive to all users. The mega-navigation menu gives the option to see all the life stages, but also to navigate content by the more traditional products and services approach.

We’ve developed mega-navigation menus for both public-facing sites and intranets, and here are a few tips we recommend when implementing:

Keep the landing page

We had a debate internally if it’s redundant to have a landing / index page that people go to when they click on the main navigation option. If all the options are in the pull-down, why do we need the page?

For example on the Lutron site, clicking a navigation option displays the mega-navigation menu and doesn’t take you to another page:

In recent usability testing on two different sites, we found that some users expect to click on the option and find more information. They might be going to the landing page to get more context on the topic, or help them make a decision. This is especially true when a user is new to a site. Landing pages also have other benefits such as:

Featuring the top tasks — Landing pages are often used to display top user tasks, calls to action, or common questions users may have.
Giving context — Landing pages help guide users through an area, and give users context about what an area is about.
Increasing search effectiveness — Landing pages and their associated URLs can help SEO and site search. They are also useful when a user enters a site from an external search engine and not necessarily through the homepage.

Have good contrast

It’s a good idea to make the menu as obvious as possible, and let people know what area is selected. The colour of the menu, and the menu highlight should stand out with good contrast. Take a look at this example from Incase where one of the images in their carousel doesn’t work too well with the navigation menu:

Adding a border to the menu, changing the shades of the menu or avoiding dark images, could make the menu more visible.

Test the timing and interaction

We try to prototype a mega-navigation menu for usability testing as early as possible in the design phase. At this point we work on what the appropriate delay is, if the menu is too big or small, if it’s awkward to get to certain sections, etc.

For example, it’s a best practice to delay opening the hover because you don’t want it flashing open every time a user moves their mouse over the navigation menu. Some sites also delay closing (look at target.com as an example) which helps when many options are packed together and a user might move their mouse slightly by accident.

We also test whether the options are intuitive, if people can click on them (don’t make the click targets too small!) and if the size of the hover changes too much between options.

If you’re looking for more example and inspiration, I recommend checking out a couple of detailed articles on the subject:

Smashing Magazine:
www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

Jakob Nielsen’s Alertbox:
www.useit.com/alertbox/mega-menus-wrong.html

UX Movement:
www.uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good

Responsive web design, dedicated mobile sites, or both?

mattj — Wed, 23 Mar 2011 21:51:52 GMT

We all agree that a website should always be “responsive” to the needs of a user.

However, should it be responsively designed using the Responsive Web Design technique, or should we design the website to respond to users’ needs dependent on the scenario in which they are accessing the website (are they mobile? are they using a small screen? is the size of their browser window reduced?)

Context?

Keep in mind that context is not only a product of screen size and the type of device that is being used to access the website, but also the underlying reason why the user is visiting the website. Short of asking the user why they are accessing a website, we must study the key users and their goals for each particular context in which they access the site, and align them with the goals of the website (in conjunction with their assessing their device capabilities).

Contextual web design?

If a user is accessing the site on a mobile device, they are accessing the site in a different context than if they were accessing it via a web browser on a desktop computer. Accordingly they will have different needs and likely want to complete different tasks.

It is likely that different content should be prioritized and presented differently for different contexts – mobile users will most likely want quick convenient access to “on the go” information (such as phone numbers, addresses and directions), whereas desktop users are more likely to want more detailed information (such as information that will help them make a decision about the company and its offerings).

Is Responsive Web Design the solution?

As explained in the A List Apart article, “Responsive Web Design” (RWD) allows a website’s layout to respond based on the device screen size (and secondarily device capabilities), and it largely infers the goals of the user based on screen size (in its true sense, RWD only serves up different CSS stylesheets for different screen resolutions). What it doesn’t address is needing to respond to the context as well – we are likely going to want to show mobile users different copy, and almost certainly we will want to show them different file-sized images so the site loads at an acceptable speed. Thus, I believe we have to use more than just a RWD approach to “respond” appropriately to mobile users with slower connections.

What about a dedicated mobile website?

At the other end of the web design spectrum, a good dedicated mobile site will be responsive to the mobile context in which it is assumed that it will be accessed, and will thus be responsive to the on the go type of information that the user will need. These sites use server-side logic to show users the relevant content, yet the problem is that typically these websites will only cater to mobile user with smartphones, such as the iPhone. What if the user only accesses the Web via a smartphone and needs more information? What if the user uses a small browser window?

This design challenge is amplified every day as technology progresses, with more and more permutations of devices, screen sizes, web browsers, and of course usage context, resulting in an infinite number of possible combinations to design for.

So what do we do?

Technically, the “Responsive Web Design” (RWD) approach can be applied to your full website to create a site that caters to mobile devices (or other devices with small screens). Conversely, you could create a second dedicated version of your website for mobile users. But what about everyone in the middle, or those on the outside with huge TV screens connected to the Internet, Xboxes or WAP phones?

It depends on your users, their needs, and your website content

Before deciding on an approach, not only do you need to understand the implication of each approach, but more importantly you need to understand why and how users are using your site in different contexts, and what the various goals for each of the contexts are. Only then can you choose the appropriate approach to present your information and deliver a truly responsive website.

For some sites the answer will be a dedicated mobile site for on the go website visitors. Other sites will be able to leverage RWD to serve different layouts to suit their users’ needs. Likely you will find you need to use a combination of both RWD and server-side intelligence to response to your users’ contexts.

The approach going forward for many of our clients will be to develop a dedicated mobile site for users on the go, while ensuring that the full experience leverages RWD to ensure those using smaller screens still have an exceptional experience. The hard part is putting that into action!

VanUE meetup: World Usability Day (WUD) 2010 presentation

ecalder — Wed, 26 Jan 2011 19:57:32 GMT

Last week I and a group of Habañero colleagues presented at the monthly VanUE (Vancouver User Experience Group) meetup on how we participated in World Usability Day (WUD) back in November (2010). We outlined our process, our highs and lows, our decision points, our deliverables and our post-event reflections. The slideshow can be viewed here.

In case you don’t want to read through all of the slides, here is what we did at a high level: The WUD Vancouver team came together in an attempt to fulfill the WUD 2010 theme (communication) by designing a mobile app that would connect citizens and their local government. The app we created is called PuddleWatch. Its primary purpose is to report puddles for the municipal government to fix and communicate back to the reporter (citizen) the status of the repaired puddles. PuddleWatch’s design also incorporated a gaming aspect (à la Foursquare). We produced wireframes, personas, images, and a “Day in the Life” style presentation to tell the PuddleWatch story.

The VanUE presentation was well received and sparked a spirited Q&A session at the end of the talk. Questions ranged from “Was decision making distinct, or did decisions just evolve?” to “Is WUD achieving its purpose?”. A brief discussion on last year’s WUD event (2009) also took place, comparing the outcomes of the two self-organizing groups of UE professionals and their similarities and differences.

Afterwards, the presenters and the attendees headed over to the Lamplighter Pub in Gastown for snacks, drinks and further discussion. It was great to mingle with so many new and returning VanUE members. The VanUE byline for World Usability Day: “Facilitating communication between citizens and government” attracted a great mix of professionals and opinions, so conversations were lively and diverse.

This year’s WUD theme is education. The byline is: Education — designing for social change. More information can be found on the WUD website. It will take place on the second Thursday of November and will hopefully attract another great group of UE professionals. The WUD Vancouver group is self-organizing though, so if you are feeling the pull to get involved this year, throw a note out to the community and get the ball rolling!

I hope to see you all at the next VanUE event!

VanUE meetup: Facilitating communication between citizens and government

ecalder — Thu, 20 Jan 2011 20:54:07 GMT

Tonight Habañero will be presenting at the monthly VanUE meetup. VanUE is a local user group of user experience (UE) professionals that get together monthly to discuss anything and everything related to user experience. The talks are always followed by a visit to a local restaurant for some good old fashioned eating, drinking, and casual banter. Tonight’s topic is "“World Usability Day: Facilitating communication between citizens and government."

This past fall, a group of local UE professional got together to celebrate World Usability Day (WUD) and tackle this year’s theme: communication. “WUD was founded in 2005 as an initiative of the Usability Professionals' Association to ensure that services and products important to human life are easier to access and simpler to use” (from: www.worldusabilityday.org). It is an annual event that is a great opportunity to meet others in the field, tackle an interesting and feel-good usability problem, and hopefully learn a thing or two along the way. This year, we created an idea for an application called PuddleWatch (a very Vancouver notion).

Tonight’s talk will walk you through our process, the highs and lows, our decision points, our deliverables and our post-event reflections. We hope that by presenting our experience, we will inspire other UE professionals to partake in next year’s event. The lessons learned might also be applicable to projects that fellow colleagues are currently working on. And maybe, we might inspire someone to build the idea that we created on WUD…

I’ll let you know how everything turns out.

The device is the message

acrandall — Mon, 20 Sep 2010 22:11:56 GMT

I was reading a recent alleged exchange between Steve Jobs and a college journalism student where Steve Jobs allegedly responded very poorly to her request for a quote from Apple for her college assignment. What was said was not important, but one of the comments on the post got me thinking. It suggested that if you want to get one of the busiest and wealthiest people on the planet to help you and feel that your request is important, not to email them from your BlackBerry or mobile phone.

I started thinking about this. When I receive an email from someone, do I weigh the value or importance of the content based on the type of device that it was sent from? What about text messages? Twitter? Facebook?

I know that I do this with a written letter versus an email. If someone takes the time to hand-write me a letter in this day and age, it says a lot. My grandparents and I often have an issue surrounding the emails we exchange and their content. I send short, non-spell-checked emails full of grammatical and spelling errors, and they respond in what would be multi-page, if they were on paper, emails with paragraphs, and indents and everything else that would go into a handwritten letter. Part of this is generational, and part of it is that I’m a poor speller. My grandmother will generally also correct my spelling and grammar when she responds to my original email.

But back to my question, if I send you an email that is obviously typed up at a PC, would you, consciously or sub-consciously weigh that as more important than the same email coming from me with the “Sent from my iPhone” sign off at the end? Or, if my email address is obviously a BlackBerry email? Perhaps as more and more of us have the ability to send emails from the hip, the “art” of typing an email at a PC will be the new handwritten letter.

Either way, the next time I need to send an important email, short or long, I’ll do my best to type it up the old-fashioned way.

Designing for mobile first

bsmith — Thu, 16 Sep 2010 01:38:16 GMT

We've all experienced a shift in our consumption of information over the last decade. We're constantly being bombarded by more and more bits of data all competing for our attention and our action. We spend more time quickly checking things on our phones and other mobile devices. When in front of the computer, notifications pop up everywhere — new emails, new instant messages, new notices from applications. Meanwhile, our phones beep reminding us of meetings, a friend commenting on Facebook, or being mentioned on Twitter. It's hard to keep focused in this environment.

What does this mean for web design? For one thing, it means users have less patience for distractions. This isn't limited to being on-the-run with a mobile device, either. It extends to our desktop environment and "normal" web pages. Designing first for mobile devices, though, enables us to better think about and simplify a design. The result is a far more focused experience — both for desktop and mobile.

The traditional way of designing a website starts with the desktop experience and treats mobile as an afterthought. It typically focuses on wireframing and mock-ups with a 1024x768 monitor in mind. Just as a task will expand to fill the time allotted to it, the design will expand to fit the physical space allotted to it. Often the result is the inclusion of many things tangential to the user's goals and a dilution of what's important. Designing first for a mobile device like the iPhone, for example, results in an 80% reduction of screen real estate. This forces us as designers to think more critically about what's important and deserving of space and what's not.

Does this mean the desktop experience should match the mobile one? Definitely not! But in a world where focus is hard to come by, designing for mobile first helps us better keep our focus as designers.

The Happiness Project (Part 2 of 2)

jshukla — Thu, 12 Aug 2010 17:47:38 GMT

What is the happiness project? Read on to find out, but if you're still curious, check out the background of how we ended up here.

How it works

The happiness project is an internal site where any employee at Habañero can enter how they are feeling and why. Once the feeling is entered, a photo from Flickr is suggested, and people can accept that photo or change it. It’s pretty simple really!

The fun part is waiting to see what photo turns up, subtly sharing your feeling with others in the company, and seeing what others are feeling.

Here are some examples of recent feelings within the company:

Some things that I took away from doing this project include:

Enable conversations

We start a lot of conversations in life with “How are you?” Usually, we get pretty generic replies like “good” or “fine” and leave it at that. I found this project took that basic interaction to the next level as people thought about how they really are feeling, and came up with creative words to describe it. The site became a great way to find out a new little tidbit about someone, which we could then use to start a conversation with them, or just bug them about it!

There were also sub-conversations going on in the site itself. We had certain situations arise in the office (not mentioning any names, but someone accidentally ate someone else’s salad!), and this site contained much of the sub-text. It was a funny way for some frustration and steam to get blown off, and for others to get in on the conversation.

Laughter is good medicine

I can’t believe how much laughter and fun this project created in the office. I didn’t expect such a simple site to create so much humour! People are pretty creative, and we all like a healthy dose of laughing at, and with, each other. With this site, I’m reminded that Habañero is a pretty healthy and fun place to work.

Link to the real world

We added a kiosk in the kitchen dedicated to the happiness project, next to (where else?) the water cooler. This not only sparked conversation throughout the day as people are getting snacks, lunch and beverages, but also reminded people to look at the site and add updates. It was positive reinforcement in the place where we know people are going to stop and take a look.

This is also where I would get solicited and unsolicited feedback on the site itself. I found it had the dual purpose of supporting usability testing in the wild and engaging people on their breaks!

Where next?

We have a list of improvements in the hopper, and are waiting for down time to start churning out those changes. Specifically, we want to make it easier for people to see several updates at once and even gauge the mood of the office. We’ve also toyed with making this more public, but for now, we’re happy to see the cultural impact it’s having inside Habañero.

If you have any suggestions, I’d love to hear about them. Leave a comment!

User experience trend: content strategy

brichards — Thu, 22 Jul 2010 01:00:00 GMT

Cat and I talk about content strategy in the third video of the UE Trends Video Series. We hope you enjoy the conversation!

Here’s what we cover

The trend: We treat content much differently today than we did two or three years ago. There is greater interest in content strategy and much blogging about it.

How we treat content differently today: We’re planning for content early, no more “lorem ipsum”, we work with content in parallel with the information architecture (IA) and we work closely with clients to plan for content. We like to think about content for sites the same way a restaurant owner thinks about their food. It’s important and you need to plan.

What roles are involved in content strategy: Content strategy is a natural extension of IA, but the business analyst (BA) is often involved in planning and authoring activities.

How to get clients to see the importance of content strategy: Show clients wireframes with existing versus cleaned-up content, keep your ears perked in usability testing for feedback about the importance of good content, and start helping them plan for content early on.

Challenges: Resources and commitment from clients to commit the time and resources needed to create high quality content.

Advice for practitioners: Think about content early and follow the many conversations about content strategy taking place on the web. A great place to start is the book Content Strategy for the Web.