User Experience

Image

In our last post, we discussed the need to recognize that there are two real users we’re designing for in a webdev project: Internal Content Editors and External End Users. 

Web developers must serve each of these user sets, so the users must be defined in as much detail as possible, to set up the needs and expectations of each, which we will use as our design requirements. We call this the Discovery process. 

External Users – End Users/Customers

The site's external end users may belong to a monolithic group, but more likely, they will belong to several subsets, differentiated in terms relevant to the client/site owner’s business or purpose. Your marketing department should research and create a Customer Profile for each subset of typical customers.

• These profiles should be generated using known demographic information as much as possible. Relevant demographics will change according to client needs.

• Other salient points about them will have to remain conjecture, until use of the new site reveals observable data about external users.

• When building the project timeline, the webdev project manager should be tapped to follow up on this information, which should help determine anticipated needs and desires for the website's ongoing features and functionality. This way, all future updates are based on actual feedback.

Internal Users – Content Editors

In reality, the Internal User is the first one to consider, because the content editor will be the first one to use the site before actual customers do. They will be inputting and updating text, images and media before the customer ever sees it, so they are key to the success of the site.

• Because there can be several levels of internal users, each should be represented by a Persona Story, also created by your Marketing department.
• A Persona Story is a pseudo-personality profile and needs assessment that will help determine the features and functionalities needed on the site.  

We’ll cover the questions used to build the Persona Story in our next post.

Image

Previously, we discussed the importance of Human-Centered Design in website development. This week, we’ll look at the three basic phases of Human-Centered Design.

INSPIRATION – This first phase of intense creativity, grounded in research. It’s a process of learning about the needs and desires of all users of the site, from internal content editors to end users. It’s when you imagine how you might approach the project, based on what you learn.

IDEATION – This is the brainstorming and iteration phase, during which you begin putting into form the ideas you came up with in the previous phase. Ideally, you bring in people like those who will actually use the site to test your ideas and give you feedback. 

IMPLEMENTATION – This is where you bring the site design into its final iteration, do the launch, and promote its use.

It takes some practice to get used to using this process, but there is help available. You can download a free PDF copy of The Field Guide to Human-Centered Design that will get you solving problems like a designer. BONUS: This guide helps you apply Human-Centered Design principles to all types of challenges, not just webdev.

Image

At the heart of effective User Experience (UX) Design, which is critical to the creation of successful websites, is Human-Centered Design. This is the term for the expression of the oldest and most central design rule in website development: Form must follow function (FFF).  

In other words, you start with the purpose of the thing you’re designing — What is it supposed to do, why, and who’s going to be using it? — and make sure that every decision you make during its design is based on the answers to those questions. The form of what you're creating must follow the function it is supposed to serve. 

Sounds like a no-brainer, right? Actually, not so much. Many folks approach a design project with preconceived notions or they see it as an opportunity to try some new technique or methodology they’ve heard about, whether or not it serves the purpose of the project.  

That’s why the FFF rule is so critical: It serves as a strong guiding influence on decision-making the whole way through the webdev project. Some will see this as a constraint to their creativity, but in reality, it’s a way to save all involved from going down innumerable rabbit holes that won't ultimately pay off.

In our next post, we'll look at the 3 basics of Human-Centered Design.  

Image

At least up until the arrival of COVID-19, few small creative agencies typically worked remotely. They generally built their processes and workflows around in-person meetings with clients, staff and vendors, with a possible phone call or rare online meeting thrown in when deadlines came down to the wire.

Not only did this tend to make the work process more cumbersome and expensive, it also slowed it down. Because digital-first agencies tend to be built by highly tech-savvy principals (if not downright tech nerds), their foundations include the use of communication, project management, and brainstorming software such as Basecamp, Slack and MindMeister to allow most—if not all—of these processes to happen virtually.

Though it may remove some of the more personable aspects of business, these types of software packages can help today’s traditional agencies retrofit their processes to be able to compete with their digital-first peers.

Image

In our last few posts, we discussed the importance of creating a positive user experience (UX) on your website. This time, we look at one of the ways to do that successfully.

One given is that each visitor arrives at your website with something they hope to accomplish, even if that’s just getting to know you and your business or organization, if they happen to land there unintentionally. Your job is to help them fulfill that goal by making it easy to use your site.

There are many methods and tactics for creating an optimal UX, and what works for one project may not work for another. That’s why UX design is never a one-size-fits-all gig. However, there are some broad tactics that work pretty much across the board, before you get really granular about any specialized functionality for a particular site.

The first of these is to employ accepted Web conventions.

Image

The Internet, in the form we’re familiar with, really started in 1989. Before that, it was really a network of electronic Bulletin Board Services (BBS) with just text and a command-line structure. But with the rise of more robust graphic page description language, the World Wide Web of today was born. Of course, it was a lot more primitive back then, and anyone remembering those days of hand-coded Gen 1 sites won’t miss it at all. But over the years since then, as HTML and PHP and CSS became more fully featured and powerful, certain conventions have evolved.

Because they did evolve organically, through repeated user preferences, they have stuck; unlike rules imposed from without, which may or may not have been useful enough to stick around. Like subway signage or road map symbols, these conventions are tacitly agreed upon and recognized by frequent users. Every so often, some freethinking, creative individual will come up with simpler or more useful versions of these conventions that they will tweak and then the new version catches on. But by and large, most of these conventions are time-tested and exist because they work.

In our next installment, we will look at specific examples of successful Web conventions that can help your site provide a positive user experience.

Every firm serious about business has a website by now. It may be of varying degrees of depth and complexity—from a simple landing page or blog to a full-blown eCommerce site—but if the company or organization sincerely expect to leverage the most active marketplace in the world, they have an Internet presence.

But maybe that presence was created a while ago now, or perhaps by people who really weren’t savvy about what really works for what you’re trying to accomplish.

There is a whole palette of tactics to choose from these days. The Web has matured and site-building tools have evolved to allow far more user-friendly interfaces than the original HTML site creators. But if you don’t know how to use those Content Management Systems, or you know the basics but need help with the finer points of structure and functionality, it’s possible that your site isn’t being all it can be in service to your online goals.

It may be time to bring in a consultant that specializes in web development. Or maybe you just need some help understanding one of the key design components that will either make or break your website’s effectiveness as a marketing and/or sales tool: User Experience (UX).

User Experience is important to everyone.

Whether you want to sell a product or service, garner a constant stream of eyes to build your brand, or simply provide a steady stream of information about a specific topic, you still need to make your site easy to use. And if it’s not, all you have to do is check your Google Analytics reports to figure out why. (You are using, analytics, right?)

You may discover that people are coming to your site, but not staying long. Perhaps many of them leave from a certain page repeatedly, and never come back. Or they're visiting your storefront, but not buying.

Whatever the specific reason, it all adds up to the fact that they didn’t have a great experience on your site, so they’re not going to reward you with their time, attention, and dollars. They have plenty of other places to go online—1.72 billion sites, at the time this was written—and they WILL find those that engage, delight, and reward them with an intuitive and pleasant user experience.

Just like the building of your site, building and maintaining an engaging user experience is not a one-time effort. Yes, there will be the major build and launch, but then you can’t just put it on the back burner. Because Web conventions and trends change with available technology, user experience is not a “fix-it-and-forget-it” deal.

So, what does it mean to build and maintain a good one? First, we have to understand the definition of UX.

What does “User Experience” really mean?

User experience is such an important part of a website, that is has its own website at the U.S. Department of Health and Human Services. Usability.gov is the leading resource for UX best practices and guidelines. It serves practitioners and students in the government and private sectors. The site provides overviews of the user-centered design process  and various UX disciplines. It also covers related information on methodology and tools for making digital content more usable and useful.

This site defines UX as focusing on “having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.”

Peter Morville, an information architecture and findability expert, created the User Experience Honeycomb to represent the desirable qualities in a website:

According to this paradigm, in order for there to be a meaningful and valuable user experience, information on your site must be:

Remember, whenever you publish a site on the World Wide Web, you are making an implicit promise to your visitor: that the time they spend there will be worthwhile. In the big scheme of things, you can theoretically make more of anything except time, so not delivering on that promise is theft of an irreplaceable resource, and once you disappoint a site visitor, they won’t forget that theft.

So you need to deliver a good UX, which means:

• Useful: Your content should be original and fulfill a need.
• Usable: Site must be easy to use.
• Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation.
• Findable: Content needs to be navigable and locatable onsite and offsite.
• Accessible: Content needs to be accessible to people with disabilities.
• Credible: Users must trust and believe what you tell them.
• You somehow attracted a visitor to your site.
• The visitor scrolled through at least more than a few of its pages.
• They understood what your site is about.
• They found something of value there and were satisfied it was worth the time they traded to be there.

Why Concern Yourself With Improving UX?

It’s a simple concept, really: If you keep people happy, they’ll be more responsive to what you wish them to do. So if you make their experience using your site easy, pleasant, maybe even fun, they’ll stay longer. If they stay longer, they’re more likely to develop good feelings toward what you offer, and to take the action you want them to take.

In business, this means visitors converting from prospects to customers. For organizations, it means visitors becoming members or subscribers or volunteers.

There is one simple concept that professional Web developers use to make this happen: They attempt to remove every possible obstacle between the visitor and what they want the visitor to do. This is called “reducing friction,” because friction occurs in physics whenever something exerts unwanted force in the opposite direction from where a body is intended to move.

No One Likes Friction

“Friction” on a website can be caused by a number of things, all of which add up to the total UX. It’s probably easiest to illustrate this point with an example:

Make It Customer-Centric

Now, with all the other things that could put your visitor off, doesn’t it just make sense to make sure the things that are within your control are as bulletproof as possible? And it’s not hard to do: Mostly, it’s just common sense, and it begins with putting yourself into the user’s shoes.

Here are a few examples of things that could end up happening with your design, and could cause a visitor to leave:

• Imagine that someone is surfing the Web, and lands on one of your blog posts. This is their point of entry to your site, one of many ways they might have gotten there.
• Having read your post, they decide that you know what you’re talking about. They want to learn more about how you gained your expertise, so they visit your About page.
• Impressed with your experience, they move through some of your other pages. The topic interests them, so they keep reading.
• At some point, they are presented with a subscription form that offers exclusive content such as a special report or downloadable eBook, in exchange for their email address.
• They sign up and enjoy the content you provided.
• A few days later, you send them an email welcoming them to your community. It contains an offer for an online video course on your topic. There are two possible choices they could make:
• They sign up for the course because they like its description, price, and the time it takes to complete.
• They don't sign up because they don't like one of those things, or because of a UX element that put them off. This could be anything from a disturbing image to an arrogant quote from you, or any number of other things.
• Visitor arrives, and is immediately bombarded by a bunch of flashing, blinking eye candy that serves to confuse and disorient, rather than attract and help. Yiy! Nope!
• There is no strong branding, headlines or copy to let the visitor know what the site is about. Buh-bye.
• :: Visitor clicks a button :: “Wait, that's not a button. It looks like a button. I don’t get this site.” Poof!
• (Here’s a pet peeve of mine): “I’m not quite sure about something on this site, but I’m interested enough in what it offers to make a little effort. I’ll just contact the site owner. But where the heck is the contact info?” :: disgusted sigh :: I’m outta here.

This is exactly the opposite of a good customer experience, so there’s a very good chance that not only will that user never become a customer, they may disparage your site to friends and colleagues. You’ve now caused damage where your job was to create goodwill.

Test, Test, Test!

To make sure that never happens, you MUST design around the user. To be sure that’s what’s actually happening and not just what you think is happening, at all points along the process—from wireframing to final launch—you need to test, test, test.

Lots of things work on paper or in theory, but once put into actual practice, unforeseen problems can arise. And the only way you can do that is to try it out as you build it. Testing should just come at the end, but all along the way, so that when a problem does arise, you can nip it in the bud, before it begets a bunch more issues.

In our next post, we’ll explore more about the actual UX design process, and some proven tactics to avoid the potential minefield of poor UX.

As we all know, the comments section of many sites is simply an open sewer.
 

We don't have the time or desire to continue monitoring that crap moving forward. Besides, there are plenty of other ways for you to publicly discuss our work and the personal worth of our staff. We'll still be reading your thoughts on Twitter and Facebook, and we legitimately do enjoy getting IRL mail (no bombs) sent to our offices in Brooklyn.

https://www.vice.com/en_us/article/were-getting-rid-of-comments-on-vice

In the age of self-service website building, design and marketing, how do professionals add value?

…offer human service that's even better than the customer could provide for herself.

By doing so we can show our clients that they will gain more by working with a professional than by cutting corners with DIY tech.

http://sethgodin.typepad.com/seths_blog/2016/12/omotenashi-and-the-service-split.html

In the longer term, client-side frameworks like Ember will allow us to build web applications which compete with and even exceed native applications with regard to perceived performance, built-in interactions, and a better developer experience. But these frameworks will also enrich interactions between web applications and device hardware, potentially allowing them to react to pinch-and-zoom, issue native push notifications, and even interact with lower-level devices.

http://buytaert.net/can-drupal-outdo-native-applications

The new site for
The Consortium on Gender, Security and Human Rights had its "soft-launch" yesterday. The site is live and usable, but the owners still have a few things they'd like to tweak.
Little do they know, web sites are never really finished - so for all intents and purposes, this is the real thing.

Probably the most interesting part of the project from my point of view was the heavy customization of Apache Solr search results, and the whole search experience. This was mostly accomplished via templates in the site's theme. I'll share a few details in case anyone's interested.

To begin with, this is a Drupal site - specifically D7. The owners had an initial design and a sort of prototype site built by a previous developer in D7, which they handed off to me. That work was done cleanly and competently, but it was clear the client wanted to go so much further than the original builder was prepared to go. I'm not sure what transpired, though I did have a friendly chat with them, but in any case they were out of the picture by the time I got involved.

When I received the site, the first thing I did was to stage it on my Drupion server. Drupion are like family to me, and I've trusted them to help me grow my Drupal business, so it was an easy pick. When the client agreed to host with me for production, that made the decision that much more rational.

Drupion got Solr and Tika set up right away. Solr is a much more powerful search tool than the built-in Drupal search, capable of handling a very large number of indexable items. More info on that here. It runs as a separate server process, and needs about half a Gig of RAM. Tika is an add-on to Solr, which allows searching inside documents such as Word, PDF and other files that are not normally presentable on the web. The client has quite a number of academic research papers and other documents in these formats, so the ability to search inside them was essential.

Once Solr was running and had started indexing the site's content, we looked at what Facets to use for searches. Facets are basically filters - they allow you to limit searches to, say, one content type, or a particular taxonomy term.

Above, you can see the some of the facets for the overall site search Here we've searched for "Gender" - a term guaranteed to return lots of results on this site.

On the left are check boxes that allow the user to narrow down the search to a particular Country, Region, etc. There's also a facet for Content type. On this site, content types mostly correspond to the type of document or media being shown - Citations, Research, Films, etc.
But you can restrict your search to one content type equally well by using the tabs along the top of the main content area - Films, Lectures, etc.
Clicking one of these will retain the same search terms, but narrow your results down to a single content type (if you want to search 2 content types, you'll have to use the checkboxes on the "All" tab).

In order to get these individual tabs implemented, I set up a separate search environment for each of the key content types. This allowed me to set facets and Bias for each (which we may want to leverage later).

Next, I made pages for each content type. Each Page has its own title, and most of them (except "All") are limited to a particular Bundle (bundles are essentially content types, at the machine level. Check out D7's Entity system for more info). Because they all have paths that look like /search/--bundle--, they're showing up as tabs on the /search page. Neat :-)

In my next post I'll show how Facet blocks are set up, and talk about theming the search results. Finally, I'll show some of the Views on the site, which offer more of a browsing experience, which I think complements the Search pages nicely.

Link