“feature complexity — scope — is always the cost multiplier, not user experience. There aren’t debates about experience or how far to take it. The user experience simply has to be up to base standard in order to ship, no matter how trimmed down the feature is.” I agree 100% – without a consistent experience, you can’t trust the results gleaned from your minimum viable product.
For the last couple of years, one of the most important columns in my TweetDeck setup was the one tasked with presenting tweets that mention Refresh Austin. The search itself is pretty straightforward, though it includes several variants to account for all of the possible ways that people might reference our group:
refreshaustin OR austinrefresh OR “refresh austin” OR “austin refresh” OR @refreshaustin. This worked beautifully for a long time, but a little while back (I don’t know when exactly) I noticed that the feed included many tweets that have nothing to do with our group. A significant portion of these are written in languages other than English, so it’s been hard to detect a pattern.
Twitter’s search now follows links within tweets to determine that they are both valid (non-spam, no malware) and also to provide additional context. So, in this case as bit.ly/ra resolves to RefreshAustin.org, the tweets appear in my search feed even though they have absolutely nothing to do with us.
So now I understand why this happens, but I do not have a solution for it. While I do not want to filter out tweets that contain the bit.ly/ra link as it is a valid link, I’d love to reduce the overall noise. This is a bit frustrating, but seems solvable with a bit of time and effort. Should I figure something out, I’ll post it.
“An inspirational collection of UI details.”
“An inspirational collection of UI details.”
"Manipulating Perceived Duration with Visual Augmentations" The video is well worth the minute it takes to watch it
“Manipulating Perceived Duration with Visual Augmentations” The video is well worth the minute it takes to watch it
We are very proud of our empirical focus, because it makes us humble – we realize that most of the time, we don’t know up-front what customers want. The feedback from testing quickly sets us straight, and helps make sure that our efforts are really focused at optimizing the things that make a difference in the customer experience
Neil Hunt, Chief Product Officer, Netflix
The rest of the response to the question “What types of things does Netflix A/B test aside from member sign-up?” is well worth the quick read.
An interesting new prototyping application. HT @toddsieling
"The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction."
I've been waiting for this functionality for a very long time and I truly hope the folks at Omni include this as a feature in an upcoming release. Until then, we can thank the fine people at UNITiD for this AppleScript.
The direct touch input removes a layer of abstraction, and that’s a really big deal. In this way, it was like going back to design for print – when you push it with your finger, it moves! – but it’s utterly unlike print in every other way imaginable. Point is, the direct interface really does mean reevaluating every assumption when it comes to interactive design.
Derek’s post is chock-full of insights, but that quote in particular struck me. I don’t think we’ve realized just how different the iPad and similar devices are from our familiar grounds, both in terms of design and usage. Tools that we’ve relied on, in some cases quite heavily, like the hover state, are on their way out, while entirely new capabilities are introduced.
We are no longer chained as designers, developers or users to that single little arrow moving about the screen. We can finally make use of all of our digits on-screen.
A useful collection of design patterns and user interfaces.
A large set of resources for those who use Illustrator for wireframes. It includes 290 free vectors icons and 200 graphic styles, all free to use. This looks very useful indeed.
Google's (very long) in depth view of online and offline social networks and what they have learned.
“moral choices” in video games are, to me, more about cost vs. benefit than right vs. wrong. Because my real-world morality may not map to the world depicted in the game, and because “being evil” is a legitimate and common play strategy, I need to know how the decisions I make serve game-related ends.
Well said. In any story-based game, my first character typically follows a pragmatic course, though I tend to lean towards “light” or “good” decisions. Once I complete an especially good game, with a well-developed story, I will start anew to experience the game with an “evil” or “bad” character. This allows me to experience the story from a different angle, see how intertwined decisions and branch and appreciate a beautifully crafted world.
Games are a separate universe, with different consequences, which
occassionaly often require that we make decisions and follow paths that we might not in our physical world. We as humans map our morality onto that universe, following our own codes and at times breaking them in ways both subtle and profound. It is both freeing and thought-provoking.
Well for me at least.
Thanks to Andrew for including that aside in his review of Alpha Protocol – it got my mind moving this morning, which likely wasn’t his intent when he wrote it. On a side note, I don’t think I’ll both with the game now that I’ve read his breakdown.
Stop. Don’t answer immediately, take a couple of seconds to think about what that question entails and the smaller questions that come with it:
- Who are your users?
- How would they describe themselves?
- Why do they visit your site?
- What are the different types of users that you are building your site for?
- Which are more important to you?
- Which are more or less likely to visit, stay and use the tools you build?
- Which don’t stay as long as you would like?
So, do you know your users? If not, here are a few methods to learn more. Some are fast, cheap and easy, others require a bit more work, but provide far more information.
You’d be amazed at what you could learn by a single poll question, especially over time.
Create a series of questions to gain information you don’t already have about your users. This may vary widely, but here are some ideas:
- Are you male or female?
- How old are you?
- What is your favorite part of the site?
- What part of the site is your least favorite?
- Is this your first time to the site?
- How often do you visit the site?
The key is to only show one question at a time. Ideally the poll is placed prominently and consistently on the site. Placing the poll in the same spot in the sidebar and rotating the question every couple of weeks will pay rich rewards over time. Most users are much more likely to answer one short question every so often than they are to answer a full survey, which takes a larger investment of time up front.
This longer form is useful for getting information quickly, but you may not reach everyone you’d like to. It does have the very real benefit of branching questions. If the user says they are a regular visitor, you can dig in a little deeper to determine why they come back.
Standard analytics that report on your site’s traffic is important when you need to find the popular areas of the site. We’re going to skip that for now as I expect you already have most of that defined or can get your hands on it easily enough.
The more interesting data comes from user-specific analytics that will help you answer questions such as the average age of your visitors, whether they are male or female and how interested they are in participating in the community. Working with this data will allow you to decide which groups of users visit one area of the site more often or take part in you discussions more regularly.
If you’re able to talk to your users directly, you can gain a wealth of information. This can be a complex undertaking requiring a lot of effort, so I recommend working with your passive data before you decide to invest the time and money interviewing your customers and prospects. Additionally, you won’t capture data from those casual visitors who stumble upon your site through a search result, so the data is incomplete when thinking about the largest area for growth.
Tie it Together
The best of all possible worlds would be to tie your direct questions (polls and surveys) with the information gathered from your analytics. If you can determine which questions to show a user based on how often they visit, you’ll have better data. If you can present questions based on how many friends the user has connected with on your site, you have a whole new axis of data to learn from.
Now That You Have Data
With the information you gathered you can prioritize where you spend your time and effort. Revisit the questions at the beginning of this piece to see how your answers differ and think about how you can use this knowledge to craft your site so it delights your users and achieves your business goals.
What Have I Missed?
This is by no means a comprehensive list of methods and ideas, and I bet that some of you have other (better?) ideas and experience to share. I’d love to hear what you think in the comments!
Sketchy-style wireframes, have wiggled their way into user experience documents the world over. With awesome tools like Balsamiq Mockups and a range of stencil sets to choose from, like as not, when an artifact describing the layout, features and workflows of a site is sent around the office or to a client, it’ll have squiggly lines.
Caveat: This post is about the sketchy style used in wireframes, not sketching in general. Sketching is an important part of the wireframing, workflow and design processes. Many a brilliant idea started life on the back of a napkin.
The reason most so often cited for the use of a sketchy style is that the squiggles convey that the document is still a work in progress. A secondary reason often follows with a claim that the sketch look obviously isn’t the site’s final design.
But sketchy style wireframes inevitably convey the opposite of what is intended, and worse, they come with additional negative implications overlooked by the proponents of the squiggle. In truth, sketchy wireframes imply that you don’t think your client is smart enough to separate crisp lines from a final design.
Simply put, the sketchy style is unprofessional. Yeah, I said it.
Would You Accept a Contract in Comic Sans?
I wouldn’t and I’m willing to bet that you would question any professional who provided you a legal document reminiscent of Garfield and Family Circle.
Wireframes aren’t supposed to be zany – they are supposed to be informative.
While our industry is young, and the tool set, younger still, we have many examples from which to learn. Architects and engineers are expected to deliver crisp lines and readable notes when they produce plans for a new home or skyscraper. The same holds true for engineers of all stripes.
Documents of any importance need to reinforce your experience, your expertise and the decisions you made as you produced them. The sketchy style does quite the opposite.
Sketchy Wireframes Imply a Lack of Importance and Conviction
Just as the final design for the site will convey a certain mood, the visual presentation of the wireframes should reinforce their importance to the success of the project. When you use a sketchy style your documents encourage the client to “fix” them.
Sketchy Wireframes Imply that Your Client Can’t Mentally Separate the Structure of a Site from its Design
While you may think this the case, you are either underestimating your clients, which is condescending or you should search for new ones, as clients who can’t understand the concept of a blueprint will likely struggle in their own endeavors. People are smart, and while you may have to explain the concept of a wireframe to a new client, the concept is easily understood.
Sketchy Wireframes Impede Comprehension
The goal of the document is to demonstrate the hierarchy of information and features and the relationships between those pieces. Wireframes are the blueprints for key business and design decisions. Adding visual clutter in the form of wavy lines, odd angles and handwriting fonts distracts from this singular purpose.
So, for the love of UX, save the sketchy look for the design phase where it belongs. Give your clients what they deserve – professional documents that aid their decisions and reinforce their selection of you for their important projects.
What Do You Think?
Am I wrong? Am I missing a key point? Do you agree with all your heart?
Leave a comment and let me know.
The Save icon – that little ol’ floppy disk that exists in nearly every application sitting on your computer and on the Web. A representation of a piece of technology so utterly out of date that it’s meaning has shifted away from its physical existence into a concept of safety and permanence.
As a means of storage it was convenient by the standards of the day, but not necessarily that reliable and yet we’ve held onto it as a symbol, in large part because everyone who uses a computer recognizes it. So I recognize the fact that we’re unlikely to actually change it any time soon, I thought it would be fun to explore alternatives, so I asked the members of Refresh Austin, those who follow me on Twitter and my friends on Facebook for their ideas on a replacement. Those conversations generated some great ideas, which I present to you.
I asked “If it were up to you to change the old floppy disk as the “save” icon across all Web and desktop apps, what would you choose?”
Several responses recommended a hard drive, replacing one form of physical media with another, more accurate version. Though as William Yarbrough noted, it may not work as well for apps in the cloud.
Keith Aric Hall was the first of many to recommend a vaults or safe. I like this idea as it reinforces the concept of “save”. As Frank Robinson noted, those also imply encryption or file-locking, so he suggested a two-drawer filing cabinet.
Terry Brown brought up the idea that since the Open icon is often an arrow pointing out of a folder, then having an arrow point into the folder would make sense for Save.
Michelle McGonagle recommended a document with a checkmark and then took a larger step outside of the normal bounds by suggesting a treasure chest or empty jar, both of which are technology-agnostic. Keith noted that many CMSes use the document with a check icon to denote “Approve for Publishing”, which could be problematic.
Clouds and Boxes proved popular, often accompanied by an arrow.
Diana Dupuis suggested a red “S” in a thin black circle.
The response from Steven Harms is too good to not quote outright:
The notion that is important is the locking of bits into a static form: stored in a cloud, stored on a disk, stored on a CD. The trouble is that those icons would be “lock” or “frosty-ness.” The former is visually synonymous with “security” and the latter with Wendy’s, so neither has quite the right visual glyph-set.
Annette Priest brought up some great points, including the fact that we’re on the verge of needing to replace phone icons as well. She also noted that perhaps we should look at a shift towards gestures for the action instead of an icon. Follow a certain pattern with your mouse or device and your work is saved.
Ryan Joy brought up the point that sometimes “save means ‘save draft’ or state and other times it’s intended as ‘publish’”. So, a bigger question may arise as to how and if we differentiate those concepts via icons.
What Do You Think?
A definitive answer was never the point, rather the conversation is the key, and it has been great so far. I’d love for you to jump in with your ideas to keep this going!.