Today I noticed some changes to the Twitter list UI. Upon viewing a profile I thought to myself, hmm, this looks cleaner. I then realized a button was missing, the list selection. Looking around I couldn’t find it anywhere. Clicking around I noticed they moved lists into the options menu, where I would normally go to Block or Spam a user.
This make logical sense especially if they are planning more features to go in this menu. But I have two problems with the change.
It adds another click and wait to add someone to a list
Previously that button was always associated with the negative actions for a user
Neither of these problems are earth shattering but it changes how I use twitter.com. I put every person I follow (and some I don’t) into a list. Some of my listsare overflowing and a change like this leads me to believe Twitter is moving away from lists. Over the course of design changes, originally you were to be able to access lists on the right column directly as links. Now they are hidden above the main stream and even then it doesn’t show you all your lists in one click.
Less and less emphasis on lists
Changes like this can make a large impact on how users interact with a service. Although Twitter isn’t publishing future plans things like this are great insight into what they think are important.
Lists show expertise and authority
For me, seeing what lists a user is on tells more about them then their bio, the number of followers, or even who we follow in common. Twitter lists are like crowd sourced tags for users. It’s an objective way to tell people what you are all about. The harder Twitter makes it to list people the less they will get used and harder it will be one less way to determine the “authority” of a user.
Recently, I saw you call out the negatives of using images instead of textual H1s. I’m completely on your side, but saw Matt Cutts recently speak about the design benefits of using a graphic head, and simply alt-tagging the H1 image with your text. There are some obvious aesthetic benefit possibilities with that approach, and I wanted to know if you thought that was an “acceptable” solution.
Answer:
Thanks for asking this question, I was actually just thinking about this the other day. Here is my stance, when ever possible using real type in the header is the best solution, if that is not possible using a print friendly (logo with white background) IMG inside of an H1 will suffice as long as the appropriate ALT text is defined. After talking to and watching a few people use screen readers the ALT text does work as if it was just text on the page.
Nothing beats real text for accessibility, filesize and search engine optimization but I realize that is not always possible. Depending on the logo you may be able to use some web fonts to replicate it natively but that is probably limited for most people. The likely solution would be using an image that would print well inside of an H1 using a real IMG tag with the appropriate ALT text defined. What I mean by a printable image is one with a white background and black type. This will ensure when someone prints the page it doesn’t look funky with a block solid color background and inverted logo as if it were displayed on the web.
To transform the printer friendly IMG I suggest using CSS to hide it and replace it for on screen viewing with part of a sprite. This will allow you to use the existing style of the site for various platforms, if you are using media queries. Since printing from the browser doesn’t typically have the “print background colors” option turned on this is the best approach to make your site look good on paper, screen and load quickly since you are using sprites.
I get a lot of questions via twitter, email and in person about comments I make in my EDU Checkup episodes. I answer all of them, some may take me longer to respond than others (sorry) but I eventually get to them all. Today as I am responding I thought I should start posting the questions and answers publicly. Of course I will keep the question askers and the institutions they work for private but I think the insight into my process/thoughts can help a lot of people out there. So for now I am going to post them here, I may transition to a few text posts on EDU Checkup like HigherEdLive did a few weeks ago. Feel free to give me feedback on the idea.
Question
We’re in the process of redesigning our website and are using a main navigation bar that does NOT drop down a submenu when rolled over.
I believe I’ve heard you comment that that was the recommended format, but I can’t remember the primary reasons. Would you mind letting me know if that’s still the better format over using navigation that does drop down submenu items when rolled over (we have people requesting this for our site)?
Answer
For me the homepage isn’t a “directory” to get to the major sections of the site. It’s more of a gateway to start determining who the visitor is and once they choose a path then they can be given more of a directory type of navigation. The primary audience for the homepage is prospective students but any number of audiences can start there so you can’t exclude them.
Secondly having a drop down under each menu item adds a whole separate level of complexity. How many items should be under each? Should they be alpha? Should it be based on process through the school? Should it be based on traffic? What if a dean/president wants a link in there, what is your justification for adding/removing items?
For me when exploring higher education sites and all the usability studies I have done and watched with our students shows they don’t use our homepage as a directory. If they know what they are looking for the will most likely search for it in the search form instead of hunting through menus. But every institution’s audience is different so I would suggest doing some tests with real students and just watching them interact with your proposed new site or other sites with similar functionality. You may also want to split that group into one you explicitly ask and ones you don’t.
I fill out a lot of forms during the day, some on existing sites and others as new internal forms that need review. When testing I have a habit of submitting forms with every error combination possible. I know there are automated tools for this but nothing beats seeing it from the users prospective. It is different to run a command line tool and get a number of fails and successes as it is to spend 2 minutes to fill in a bunch of fields and get some weird screen state, odd colors or wording that doesn’t make sense.
That is exactly what is happening above. I clearly filled out the form to my best understanding and still got an error.
Things I notice about this error:
There is something wrong with these three fields, but it doesn’t point out which one(s)
The wording of the error forces me to look up and then scan down to see where the field is
In my mind I did place the area code in the phone field
There is no explanation of the preferred format for the phone number
After understanding that my method isn’t working and they were not going to automatically transform my format to their preferred format I tried every phone number combination I could think of. In the end none of them worked. Being the curious person I am I ended up digging through their validation javascript and found this regular expression it was validating against:
Doing a little more investigation I found that it didn’t work at all. Try every combination you can think of at: http://j.mp/9sIWEn
Good error messages should include:
A summary at the top of the page of all the errors (long forms usually push the user back to the top of the page)
A highlight around each field with an error
An explanation with an example or clear direction where the visitor went wrong
Not be nit-picky about formatting, transform as much as possible automatically
In the end I brought this issue up to Groupon and they fixed it within an hour. The issue was not with their code, but on the survey vendor’s site. It got me thinking about the time and effort the user has gone through to get to this point and end up confronted with a road block. These small things have the potential to be a huge turn off for the average user. Command line tools may be great but nothing replaces what you can learn by testing things by hand.
Green means go right? Green also means positive, and lastly confirm. So why not manipulate a user’s actions by placing a green button to confirm an action they might have otherwise not taken? That is exactly what I encountered a few days ago at a grocery store.
The Setup
I went to the self checkout, scanned my few items, clicked to end the order and pay by credit card. After swiping my card I was presented with this screen:
What I did
Typically when I see a screen like this: a large title, the total of my order and then a “Yes” and “No” button. I think to myself, “Yes I confirm this charge, lets continue.” So naturally I click Yes because I didn’t want to cancel, and then I was presented with this screen:
Not what I expected
So now I was confused, why is it asking me for cash back? I just wanted to complete my order. So naturally I hit “No” and it went to the “Thank You” screen I expected before.
What happened
After using the machine a few times over the course of a few days I finally realized what was going on. The question on the confirmation screen was not what I expected. It is asking for “Cash Back” and not to confirm the total at all. I then felt silly that I had missed this large print text.
Thinking to myself, “am I the only one who missed this?” I looked around for a few minutes as others were checking out. Four people checked out with credit cards, they were all presented with the same screen, two of them clicked “No” and went on with their day. The other two clicked the “Yes” button and in the same state of confusion paused for a minute before clicking the “No” cash back. Neither of them wanted cash back but yet still clicked the “Yes” button.
Buttons can be dangerous
This reminds me a lot of Microsoft Windows and the issue it has had in the past with users installing spyware simply because they click an “Okay” button on a dialog box. They don’t read the box they just assume that “Yes” is the default and preferred choice. It reminds me of a great TED talk by Barry Schwartz on the paradox of choice. When presented with options users will choose the easiest way out.
The lesson is, as a user be careful about what you click. As a producer be good to your users, design to delight, and not to fool them.
