Category: uxd

Who values your product and do you value them?

We have reached the most critical point on a project I'm working on. After a few months we think we know enough about the domain and application to build a product road map that will take us to the first public release. The proof of concept is complete. The design team has created a remarkable, genera changing product. Additionally, the system is designed around real users we have been able to talk to and get feedback from. We have put together an unbelievably good development team and built a backlog of stories with estimates. We have been here before. Putting together a design and backlog of stories is something we have done countless times...

The easy part is over. Now the hard part begins.

Our research and user feedback tells us we have multiple potentialcustomer groups we can build the system for. On one hand this is great news. We have a number of potential markets to choose from. On the other, we don't have an infinite amount of time and money to build it for all of these groups. We have to commit and go all in with one group. Right now, these are just some of the questions we are asking ourselves now:

  • What customer group do we value the most?
  • What features do they value the most?
  • How expensive is it to build the ultimate product for each group?
  • What is the minimum viable product we can build for each group?
  • Which group is most likely to give feedback and partner with us to help refine our product?
  • How much feedback is this group likely to give you?
  • Are we missing some market window by passing on one group v.s. another?

This is a critical point in the product's design. Whichever user group we choose will be our customers. Or another way of saying it: They will be our ONLY customers. Other customer groups aren't likely to be interested because we aren't building any features for them yet.

When designing a product do you consider what customer groups you are including and excluding? Are you going to be happy with that choice for the foreseeable future?

Storytelling in Design

bmw

Instead of a "loading" animation that we may bail out on, why not tell a story? I was impressed with this technique used by BMW.  They are running banner ads on NBC's site which hypes the upcoming Olympic events. You see a car in the banner ad, you expect to click and see more car. But you don't. Instead, a blank white screen with just a few short words pops up. But the words tell a quick paced story. phrase by phrase, of what joy is. Joy is Timeless. Joy is Freedom. Joy is Innovation. And below those words is the "loading" indicator. 10%, 20%, 32%, and so on. A nice example of storytelling used in design - if you are going to make someone wait (or have to, because you are loading a high-end car video), consider getting them engaged with a story.

http://www.bmw.com/com/en/insights/technology/joy/bmw_joy.html

Why would you use a tablet instead of a laptop? (In Pictures)

As an answer to those asking why we need a tablet anyway, there's a very funny set of pictures and comments at WTF Is Wrong with Laptop Users in the Media. The author went through the first 400 images (out of 28,886) he got on a search at Getty Images of "Using a laptop" and compiled the highlights. My favorites:

Businessman looking intensly in his laptop

pink-shirt-laptop

laptop_user

Woman sitting on peir, shpagat i si ebe fara

Two chicks with a laptop on the beach

Sailboat laptop

Now ask yourself, in which of those pictures would (a sealed, always on, always connected) tablet make more sense?

In all of them (although the beach one still seems like a bad idea.)

Trading Away Technical Complexities for Vastly Increased Simplicity and Ease of Use

... it's hard not to think about how much easier some people's lives would be (hi Mom and Dad) if they could trade technical complexities they don't care about for vastly increased simplicity and ease of use.

- John Siracusa, ars technica

skype-videophone

My parents were technically savvy enough (with a little help from their sons) to start using Skype video in their mid seventies, prompted by the arrival of grandkids halfway across the country. But for them, it was always a cumbersome affair:

1. Arrange a time to have the video call.
2. Move the laptop to the dining room.
3. Call on the telephone to tell me that they're using Skype on the computer.
4. Initiate the Skype phone call.

Needless to say, this did not happen all that often.

This past Christmas my brother got them a Skype Video Phone. They set it up with a little help from us, and when we told them to just treat it like the telephone, they got the idea. Now, they are making video calls much more frequently - not just to the grandkids, but to our cousins in Switzerland and South Africa.

They traded complexity for simplicity and ease of use, and though the skype video phone will not end up being a success on the level of the iPhone, it's already brought my parents a lot of joy, and is part of a trend towards more simplicity and ease of use. It's one major reason the iPhone is as successful as it is.

Now imagine that simplicity and ease of use in a multipurpose, always on device with a bigger screen. My parents wouldn't need the skype video phone, they'd just have that as an app on their tablet.

Art vs. Design, the Art of Design, or the Design of Art

blog_art_vs_design_1-725473_50

A couple of days ago I happened upon an interesting article about the difference between art and design. The author makes a lot of interesting points, and whether you agree or not with the statements he makes, the article does make for a great conversation starter.

Art and design are two different words, and some say two different worlds as well. The use of each often comes with a distinct connotation. I could go on about how design's goal is to solve a problem, whereas art doesn't necessarily always have a problem to solve. I could talk about how art doesn't necessarily require a common user experience, whereas design more often than not does. I could expand upon that by discussing how art doesn't require that a thing be usable, whereas design is often judged in part or whole by its level of usability. I could even discuss how art can be effective whether done collaboratively or not, and contrast that with numerous examples of how here in our agile software development environment at Pathfinder we find collaboration inseparable from our design process.

But I could also talk about how much art and design overlap and blend, so much so that it becomes difficult to make concrete distinctions. And how, sure, software design is about solving a problem, but it's also about solving a problem beautifully. Continue reading »

Topics: ,

Software Development: Importance Doesn’t Always Equal Effort

Importance

I've worked on more than a few software projects over the decades and one of my favorite little misunderstandings is the Importance versus Effort disconnect. That's where non-experts assume that because a particular part of a software system is more important than another, it must also take more effort to develop. That is rarely the case and, in fact, importance -- however that is defined -- is rarely a driving factor in determining effort or cost. This sort of misconception can result in some planning and budgeting mistakes, sometimes to comic or even tragic effect.

To illustrate, I can point to a trading system that I worked on (the names have been changed to protect the innocent). The average size of a transaction in this system was over $1 billion in 1990's money. The part of the system that resolved the transactions was really really "important," but the part of the system that allowed an application helpdesk to support users by seeing what their user's saw cost 60% more to develop. That's right, an "unimportant" helpdesk module was more expensive and took more effort and cost more than the "important" backend that handled billions of dollars a day.

Continue reading »

User Centric Design – the Who, What, Why and How of a Feature

At Pathfinder, we do our best to help our clients experience the software through the eyes of the user. Defining a feature includes explaining who will be using it, what they need to accomplish, why they need to accomplish it and how they’ll actually do it.

We start with personas (who) — they define the user base and let us identify the primary users whose needs we should focus on, which in turn drives the feature list. Personas also bring the human element into software development. Rather than using a vague term such as actor or user, terms that can easily be dismissed, we now have Myrna from Accounting, a numbers guru who is the primary user of the new software. Myrna is not so easily dismissed, especially once her needs and goals are identified.

We move onto user stories, all of which are written from the point of view of the personas: Continue reading »

Wireframing with incomplete requirements

The value of wireframing even with incomplete information

The task of wireframing in application development, as I've come to know it, should begin after user research has been performed, and a complete set of requirements gathered.  But what happens when, for whatever reason, you just don't have access to user research, or a full set of requirements?  What if all you have are some rather unspecific, vague notions of what the user should and should not be able to do?  Is wireframing at this juncture useful?  I say yes.  With incomplete or even almost non existent information about target users and or requirements, wireframes can still be a valuable tool in the interface designers toolkit.

The key to a wireframe's usefulness is that it is a visual document.  Presumably it will be presented to one or more product stakeholders, and they will have the opportunity to review it and comment.  Having something visual to respond to is one of the easiest ways to generate ideas, and identify incomplete specifications.  A good assumption is that if a product's requirements are incomplete, someone at the wireframe review will notice the gap by responding in the context of the visual presentation.  "Where is the Cancel button?  Oh...not in the requirements?  Well it's obvious that on this screen the user will need to be able to cancel, so we have to add that as a requirement."

In this way, a wireframe can be an ever evolving document, which begins by starting the requirements conversation.  Of course ultimately, just prior to feature development, the wireframe should have all of the necessary specifics so that the developers can use it as a guide (along with the relevant user stories).


Error Messages & Usability

I was starting up one of the Adobe apps the other day when this somewhat troublesome message was displayed:

error_adobe

Ack! On the one hand, good for them for alerting me that an error had occurred. On the other hand, what's up with that message? I had no idea what I could do beyond clicking ok (and after reading the message I wasn't sure all was ok). A bit unnerving, but it did get me thinking about how applications deal with error messages.

The idea that non-technical users will be viewing error messages is one of those things that tends to be overlooked. You’re so focused on getting all the features up and working that dealing with errors on the presentation layer are often left out of both design and implementation.

Even if time is crunched on a project, however, here are three scenarios you should always cover in a user-friendly fashion: Continue reading »

Does your project have Code Ownership Culture?

Open Source Code Ownership Code Ownership is a well known term in software development. Depending on how you define it, it may be a good thing or bad. When a developer sees code-ownership as him/her owning a piece of codebase that only he/she understands enough to make changes, it is generally a bad thing. It is only when everybody is free to modify the code with a sense of responsibility that he/she should leave the code cleaner than how they found it, it is a good thing. In my view, code-ownership is a good thing when viewed as a responsibilty as opposed to a right. I view it as a Collective Code Ownership where code is not owned by a single person or pair but is owned by an entire team.

So, the question is: How to determine if your project/organization has that collective code ownership culture. And what team members (including managers :-) ) can do to create/encourage it.

Does your project have collective code ownership?
Here are few things you may want to ask yourself to determine if your organization/project has collective ownership culture.

Continue reading »

Bridging the Gap Between Rails Developers and HTML Designers

5E22427E-BAAE-41A1-B7A8-B1FF4D55753E.jpg alt=

To make a cheap joke and paraphrase a common quote, web developers and web designers are two groups separated by common languages. In our case, the languages are HTML and CSS, which are the output of both the web design process and the web development process. Developers and designers produce their HTML/CSS in different ways and with different goals. Here are some ideas for bridging the gap so that the developers and designers on your team can work together smoothly.

Designers and developers obviously have different goals for their HTML -- developers have issues of reducing duplication, organization, and performance that are largely not the designer's concerns. The designer is primarily concerned with how the HTML looks and behaves to the user.

Continue reading »

Topics: ,

Developing Good Wireframes Ahead of Visual Design

WireframeIn the design process, the wireframes focus on the structure/layout of elements on the screen, and the interaction that the screens will provide. The visual design focuses on aspects of design such as colors, graphics, branding and mood.

Design encompasses both of these, and both are equally important. But by first addressing the software's information design & interaction needs, wireframes help you make sure the user experience makes sense, including that the workflows are natural and intuitive for users, and that the interactions are easy and clear. Without these, a site may not be very usable. Developing good skeletal wireframes before fleshing out the visual design is important for several reasons.

Focuses the Conversation
Visual designs tend to elicit more of an emotional response than wireframes. Hence, putting a fleshed out visual design in front of a client can divert attention from the structure and interaction of the page, and tilt the conversation more towards the color and graphic choices. Skeletal wireframes help you and your client focus the conversation on the business goals and the needs of the user. Continue reading »

Software Development and the Construction Analogy

Dan Vanderboom has a thoughtful post up about software development methods. I especially like his takedown of the building construction analogy that is overused and abused in the world of software development:

[...] this is completely at odds with how homes are normally built.  People typically choose a previously-implemented design, and only customize superficial features like countertops, cabinets, floors, and railings.  Houses from this plan have been built before, and the labor and materials cost are known from previous experience.

Building software is usually more like constructing something that’s never been built before: the first sky scraper, the Golden Gate Bridge, or the Hoover Dam.  The requirements are unique, the pieces have never been assembled in such a way before, and there’s an inherent level of risk in creating something new.  When this is the case, the Customer needs the services of an Architect, not just a Builder who stamps out deliverables in a cookie-cutter style.

I would add two points to his post:

  • One additional reason that building construction is not a good metaphor for software construction is that it breaks down along scale. You can construct a scale model of a house to validate the concept, but a scale model of the software is the same as the software itself. An application's size is measured in features, not feet. That's why agile development seeks to deliver a minimal set of features as quickly as possible.
  • We've folded User Experience Design (UXD) into our agile process as a way of getting to value more quickly. Feedback in agile is important, but if you can improve the quality of that feedback, you converge on good features more quickly.

Related Services: Custom Software Development, Agile Development

Don’t be lazy, download a good browser

Why are we developers still taking a hit for Microsoft's IE6 by doing additional work for it? Well we are certainly not eager about it . "The Market" is directing us by showing us that people use it a lot.

The market says that about 15% of people today are using IE6 which is 8 years old now.

Nothing to be surprised about.

Recently, we at Pathfinder were presented with statistics of usage for a desktop software created in-house showing the biggest drop in workflow at software installation reinforcing the point that people have a hard time installing software, so why would they go around installing a new browser when they already have one? Most people are under the impression that "the site" or "the internet" doesn't work and not the browser they are using and there's nobody there to tell most people what the problem really is.
Continue reading »

Topics: , , , ,

Exactly What are Wireframes?

Wireframes are the bare-bones schematic of the presentation layer for an application or web site. They are the visual interpretation of the user and business needs for any given feature. At a basic level, they show the page layout and placement of various elements on the page. At a more detailed level, they identify user interactions and the expected behavior.

Why use them?

Wireframes are a great communication tool for all members of a project team. Instead of an abstract list of requirements or a verbal description of a concept, the visual nature of a wireframe allows everyone to see exactly what it is they’re discussing. They are usually black and white (sometimes with shades of gray) schematics because we want to get feedback on the page structure and behavior, not the visual design. However, wireframes created for mature applications can readily incorporate existing visual design since that language is already defined and shouldn’t divert focus from the reason we’re looking at wireframes.

Annotated Wireframe

Although a picture is worth a thousand words, adding annotations to a wireframe lets the viewer immediately know the expected user behavior of various elements on the page. While a more detailed explanation of the behavior is generally contained in the design specs, adding a shorter version here is extremely helpful.

Here's an example of what an annotated wireframe can look like:

annotated wireframe

Who uses them?

All team members. Because they are a visual artifact of what is proposed to be built, they are an easy and cost-effective way to get the stakeholders to sign-off on how their business requirements will be translated to software, before any code is written. They also give development a heads up on what the page will look like and how it’s expected to behave; which means they also let QA know what to expect once the feature is ready for testing.

While I sometimes have to educate clients new to software development on the benefits of wireframes, once they see them within the context of a project, they're sold on the benefits and understand their usefulness.

Related Services: User Experience Design, Custom Software Development

Launch: Pathfinder Newsletter

    Get a monthly update on best practices for delivering successful software.

    Subscribe via email


    Subscribe via RSS      RSS icon

Topics

Search

WordPress

Comments about this site: info@pathf.com