I was on a call with my manager trying to login to an application that requires Safari or Firefox. He was using a Mac with Safari so I decided to use Safari as well, but on Windows.
Apple uses what I consider non-standard design patterns for some features. I say non-standard because if the other three major browsers are using similar patterns but Safari uses something different, well, it’s annoying.
I was trying to bookmark this application. Nothing in the Safari UI jumped out at me. I didn’t see anything that said ‘bookmark’ or ‘favorite’. I didn’t see a star icon. I was stumped.
Safari menu bar
I did notice the ‘plus’ icon to the left of the address bar but I was not willing to click it. Neither its location nor icon led me to believe it had anything to do with bookmarking a page.
I eventually clicked the ‘book’ icon, which opens a pane called “Collections” and allows one to manage existing bookmarks but does not include a way to bookmark the current page. UGH!
As it turns out, the ‘plus’ icon is the way to bookmark the current page. Such a simple task should not cause this level of uncertainty or confusion.
Safari menu bar ‘bookmark’ button
Design Recommendation for Safari on Windows
Safari on Windows should use the ‘star’ icon for adding a bookmark and that icon should be to the right instead of on the left, the pattern familiar to Windows users.
For comparison, here is how the other three major browsers do it.
Chrome menu barFirefox menu barInternet Explorer menu bar
Next time, I’ll examine the bookmarking UI patterns on mobile.
The Hulu interface differs in confusing ways between its desktop website, iPhone app, and Android app for managing your favorite shows.
Desktop Website
On Hulu’s website, it’s easy to “favorite” a show. You go to the show’s overview page and click the link with a plus icon and “favorite” label. Once a show is a favorite, the plus changes to a check mark.
What’s more difficult is removing a show from your favorites since the interface expects a user to understand that clicking the same “favorite” label will now remove it.
Hulu’s desktop website
It’s not immediately obvious what adding a show to your favorites does either. You have to find the “Favorites” page by hovering over your account name, then clicking the “favorite” link in the menu.
Hulu’s Favorites page
On the “Favorites” page, you can select what gets added to your queue automatically for any shows you’ve added as a favorite. I really like this feature. However, now that I use the mobile app exclusively to watch shows, I’ve had a very hard time figuring out how to manage my favorites.
iPhone App
On the iPhone, there is a tiny icon on the show’s detail page with no label and no feedback about what tapping it does. I already have Saturday Night Live added to my favorites, so I was really confused why it shows a plus icon instead of a check mark on my mobile.
Hulu app on iPhone
Tapping the plus icon takes you to a screen where you can add additional episodes, even entire past seasons, to your queue.
iPhone add episodes to queue
I was left feeling very uncertain whether this show was still one of my favorites and if new episodes would get added to my queue.
An additional problem is that I had trouble finding my favorites list. There is a “Shows You Watch” icon on the navigation bar but this includes you anything you’ve watched, not just favorites.
After much digging around, I finally found the “Favorites” screen buried under the “Browse” menu icon > gear icon for “Edit Account” > “Favorites” link. Here I could verify which shows will have new episodes to my queue.
iPhone Favorites screen
Android App
By comparison, the Android app makes it very apparent whether a show is a favorite by providing a big “Add to Favorites/Remove from Favorites” button on a show’s detail screen.
Hulu app on Android
What’s less clear is how to manage which episodes or clips from your favorite shows get added to your queue. The “Favorites” screen provides shortcuts to your shows only and does not have the same settings as the website and iPhone app.
Android Favorites screen
Design Recommendation for Hulu
On the iPhone app, use the add/remove button concept too. Move the plus icon for adding episodes manually to your queue next to the list of episodes.
iPhone design recommendation
On the Android app, provide a clear way to manage the way favorites update your queue.
On the website, again use two labels: “Add to Favorites” then change to to “Remove from Favorites” after a user adds it. Don’t expect a check mark icon to perform double duty. Here it expects users to understand that the check mark means a show is a favorite and that clicking it will remove it from favorites. That makes my brain hurt!
My username was pre-populated because I have used the site on my phone before. I thought my password was also pre-populated, because the placeholder text Twitter uses in the password field is a series of dots, which look just like an obfuscated password.
Twitter’s password placeholder text
Thinking my password was already entered into the password field, I tapped the “Sign in” button. The page refreshed and I wasn’t signed in, but I didn’t see why, so I tapped “Sign in” again, thinking the site had a glitch.
What actually happened was that I had not entered my password, and the error message on the page was located at the top in a light gray text, hardly noticeable, and resulting in frustration while I tried to figure out what was wrong.
Two easy fixes Twitter should make
Remove the dots as placeholder text from the “Password” field. They are not necessary and cause confusion. Placeholder text in form fields are harmful because it makes it hard for users to know what information they have already entered.
Move the error message next to the field where the error occurred and make it obvious. By placing it at the top of the form, away from the “Password” field, and making it a light gray, it isn’t obvious for users.
In working on a quick mock-up of these improvements, I realized that Twitter developers likely added the placeholder text so that users would know where to type. Without the placeholder text, it’s not obvious. That said, adding placeholder text isn’t the best solution.
Mock-up of changes Twitter could make to the mobile Sign In form
Though Twitter has made some changes, such as removing the dots as placeholder text in the password field, it continues to use placeholder text and the error message still displays above the form in hard to see gray text.
