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.
Looks like Twitter just updated their “following you” email format. I haven’t seen a reference to it on the Twitter Blog yet so it might be pushed out slowly. I have included screenshots of the old and new layouts above for comparison. A few things have been changing:
Informationally
The subject now includes the person’s twitter handle
Removed the “follows x users who follow you” (think this was a good removal, no value lost)
No more “What’s Next?” to explain how to send an @reply or DM (is this assumed now?)
Graphically
Much more in line with updated Twitter homepage and overall look
Not sure what that check box is doing up there in the top right (it is not clickable)
The tweets/following/followers placement is far easier to scan
The large blue “View @person’s profile” is hard to miss as a next step
Underlines have been removed from all links. The link and text colors are a little too close for my comfort, I wonder how #a11y experts think about the change.
Overall I think Twitter is moving in the right direction but still has a little ways to go. I would love to see the location added back in, links being underlined and the addition of how many lists the user is on. I think the number of lists is a great indication of the impact the twitter has in their community.
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.
