Tag: ux

The Privilege of Default Settings

You’ve probably heard the analogy that being a heterosexual, white, cisgender, Christian male is playing the game of life at its easiest setting. Most things are aimed at you, from consumer products on down to expectations. Being those things causes you to come from a place of privilege, even if you’re poor. The world is aimed towards you a little more, and your default assumptions are ‘correct’ because media and everything else reinforces them.

Sometimes when I look at the choices and decisions we make in Open Source, I think we’re falling prey to the same concept.

The day after my team lost the World Series in 2016, I found myself struggling through an emotional (and chemical) hangover, whereby I was pretty much half the speed at thinking as I normally am. In this state of mind, I decided it was a dandy idea to sit and do some serious UI testing of products for myself as well as WordPress core. It was surprising, enlightening, and humbling.

I know WordPress. I know it really, really well. I use it daily, I write it in it every day. I monitor and support end users. I review code every day. Rarely has 36 hours passed without me learning something new about it, but also seeing a hundred people making the same mistakes. I often tell people “If I can’t figure out how to use your plugin, based on the readme, you didn’t write it well enough.” A new version of this is that when hungover me can’t figure out what your plugin does, there’s a lot more wrong.

Related to this is the tone and language in which I am wiring to you this very moment. I write from a place of decent education and intelligence. I use words like obsequious and peradventure from time to time, not because they sound cool (though they do, I like the sound of words) but because they draw your attention to the point in different ways.

This proves beyond peradventure that the intent of the name of the product was to leverage the name of its competitor.

I don’t actually send plugin emails with that stuff, no matter how much I think in that way. It would make people think I’m talking down to them.

Which brings me back to my point.

We, who create for WordPress, are in a place of exceptionally high privilege. We name drop people like Helen and Mark and Matt and Mike (no, the other Mike) without a second thought because they’re a part of our lives. We’re not trying to seem high and mighty, but these are people with whom we’ve played Cards Against Humanity, or had churros, or sat on a bed giggling like tween girls. We’ve made a tribe with people we see daily, virtually, and they’re a part of our norm.

But to the average WordPress user? They don’t care. Or if they do, they care jealously. And worse, when we say things like how we talked and made a decision about them without their input, they feel left out. And they were. They were intentionally, mindfully, willfully left out.

We felt our default assumptions were correct.

We felt that we knew better.

We felt, based on our experiences and usage and tests, that we were right.

Well. We can be wrong. We know this. Often we trust our heads more than our hearts, making amazing mistakes by assuming we know the best from our expertise. And the biggest fallouts when it comes to our work will be in those moments. When we decide “this is right” without taking the time to use our product hung over, or to ask for more help, or to trust that gut feeling.

This is incredibly hard to do. When you consider WordPress, there are times a feature will make it to Beta and we’ll realize we were wrong. Post Formats UI, anyone?

As gutting as it was to pull that so late, the decision was wise and sound. Not because this wasn’t something people wanted (and might use) but because it’s implementation wasn’t up to snuff. It was a fundamental feeling of ‘this is wrong.’ And Mark trusted his heart in the moment and said even if the code was fine, there was something off in the using. He understood the implications, too. That how the UI was implemented would influence future work.

It’s difficult to explain how huge that is without sounding like I’m making a mountain out of molehill or fighting a strawman. The decision we make in WordPress, in any project, do not live their lives out in a vacuum. The decision to make widgets, featured images, categories, custom post types, and on and on all have influenced how future features are designed and built. We know this. So when we introduce a new feature, a new flow for using features, we have to consider the future.

And that means we need to forget our privilege of someone who knows the code, who knows the system, and who has all the benefits of experience. We need to be the first time user, the uneducated, the newbie. We have to accept that we will be wrong, and we have to be willing to admit our wrongness. To fail to do this means we’ll never learn.

9 November, 2016
Apple Watch UX: Too Small

The biggest issue I have with my watch is the UX to perform an action.

I use the WebMD app to remind me to take my pills every morning. At 7:15 it pings my watch and says to take them. I have to scroll down and tap ‘take’ but it gives me three options: Skip, Take, Dismiss.

This is not the same as the alert they show on their Apple page:

That shows up when you miss the alert and go check what you need to take.

This strikes me as a bit off. The information is too small and the buttons are not as clear as they should be, and I have to scroll down.

So let’s think what does someone want when they get that alert? They either take the pill or not. Or they dismiss the alert. We want them to take the pills, so we should make that button bigger and green. We don’t want them to not, so make that normal and red. As for dismissing, we can swipe the alert down, so you can leave that button off completely and use the built in UX.

When we consider the Human Interface Guidelines of the Watch, I think they’ve aimed too small. While they say to have buttons be “large enough to be tapped easily” and “Create buttons that are easy for the user to tap.” the minimum sizes they provide are shockingly small.

A 42mm Watch has 390px of usable vertical height. 52px (which is the minimum size for the 42mm) is 13.3% of the height. That’s 13mm. Hold on to that number.

There was a study by the MIT Touch Lab which investigated Human Fingertips in the Mechanics of Tactile Sense and they determined the average width of an adult human index finger is 1.6 to 2 cm (16 – 20 mm).

Now Apple’s saying the minimum height is 13mm when the smaller end of average is 16mm. That means if your button is the minimum, most of us will have trouble tapping your button.

I’m not a graphic designer. I call myself a monkey with a crayon. I’m not a UX expert. But I am is a very experienced user and I’m someone who understands how users think. That’s distressingly more rare than you’d think. I understand how a user goes from A to B and gets lost on C.

When I first got my Apple Watch, I struggled. I had a lot of confusion over force touch (something I still find a little difficult to get correct). But I’ve learned the one thing. Those buttons need to be bigger.

These are the buttons for alarms. The one I don’t have is the nightstand mode button but I use my Watch for an alarm and I don’t have a snooze. Sometimes I have trouble tapping the button in the morning, but I don’t think that’s a function of button size. That said… Those buttons could be larger.

The Watch tries to separate functions on the Watch, alerts, by ones you look at and ones you interact with. I think the interactions need to have bigger buttons in order for more meaningful, easier, usability.

Some of this will be addressed in WatchOS 3, which will have us swiping less. But the majority of apps are still trying too hard to cram more information onto small screens. WebMD included. We need to get better about separating information from alerts on our notifications and devices. We need to have everything be easily dismissible with one gesture.

Thankfully we’ll keep iterating and getting better.

24 June, 2016
NUX: Setting Up Ghost Pro
NUX stands for “New User Experience” and I’ve been dabbling in it recently with WordPress, trying to understand where we fail for new users. My friend did a comparison for his company of other similar tools and told me that Ghost’s was the worst. I didn’t believe him, so I decided to check it out.

Ghost is a simple, powerful publishing platform. It’s dead simple. It’s basic. And it’s weirdly hard and complex. The code is simple, but much like WordPress, it’s hit the wall of explaining new concepts to people. Ghost Pro is their ‘managed hosting’ version, where you sign up and get a blog.

Of note, this is not talking about the self hosted Ghost application.

Registration Is Easy As Pie

This is easy. You go to the main page of Ghost.org, you pick a username and password, you press ‘test it out.’ That then asks if you want the download or to make a new site, and don’t worry about the credit cards yet. You get 14 days free. If you pick the new site, it asks for the site name, the URL you want (it’ll be something.ghost.io) and then…

It’s weird that it wants my name and password, and I do wonder if it’s making another account on the system. Do I now have a user account and a ‘network’ account?

Writing A New Post Is A Lie

Once you have your site, you’re dumped here:

They even have an animated ‘Write A Post’ button there, which is great. Except it’s a lie. That link kicks you to the https://something.ghost.io/ghost/1/ page which is the ‘Hello World’ type post and you can edit it. Except you’re not told you can edit it. You’re just told your site is live.

First up, that “Write A Post” button should have been “Complete Setup”.

Second, when I do complete setup, I should have a nice popup to tell me “Your site is setup! This is your first post. You can edit it…”

There is a nice EDIT button, but that should have been animated too. That takes you to the editor, which is realtime and actually quite nice.

Continuing Setup Is A Five

If you go to https://ghost.org/setup, it will tell you there are five steps to setup.
1. Create an Account (you’ve done that to get this far)
2. Writing a post (you have to write a new one, not edit the existing one)
3. Picking a Theme
4. Add a domain
5. Share your work
Write A Post? Let’s Try.

The setup is an editor only on the left, with a preview on the right. Fine. Click click type. Then I wanted to add an image, so I tried the old drag & drop from WordPress. Nope! Looking at the Help, I found this:

When adding images to your Ghost blog, you start by either pressing Ctrl+Shift+I or by typing in ![]() into your post editor. You will then see an image box show up on your markdown preview.

That was fairly easy to find, but then I got this:

It took me a moment to realize I could click on that to get the uploader interface. In fact, not until I hovered over and saw ‘No File Chosen’ did it register. The little link icon on the bottom left made sense, but there was nothing that told be “Click here and upload.”

Scheduled Posts … Why?

I decided to try scheduling a post. Since by default the save button on the bottom right is ‘Save Draft’ and I knew by hovering that I could do a ‘Publish Now’ there, I assumed the little gear to the left was for extra things:

And lo, it did show me a lot of options, that were just a bit too long for my 15″ monitor:

There I was able to pick a future date, but instead of changing to ‘Schedule Post’ the button remained ‘Publish Now’ which was rather disconcerting. Picking publish, it worked just as it was supposed to, though, so there’s that.

Themes Don’t Fly

Time to pick a theme! From the getting started flow, I pressed the button for ‘Marketplace’ because I don’t need to watch a video, right?

That button takes you back to your Ghost dashboard. From there you have to click on the link at the top of the page for the Marketplace. Then you download the theme’s zip, go to the settings page for your blog, and upload the zip there. Very weird. Very odd.

Overall? Not Yet.

I like it. It’s easy to write once you figure out a couple things, but the disjointed behavior of where you go to do things is confusing and a bit of a headache. For a brand new user who’s never have a website, it fails when you compare to WordPress.com except in the arena of posting content. It’s simple for that. It’s the management levels where it fails.
22 April, 2015
Mailbag: Facebook Page Notifications

A family member, after teasing me for not knowing someone was married because the only place they announced was on Facebook (and Shredder? You’re not off the hook either), finally asked:

Why do you still hate facebook?

Because the interface is inconsistent and sucks. Let me explain by showing you about my Page Notifications.

I still use Facebook under duress and happily go weeks without noticing I have alerts waiting. When I do remember to check in, this is usually my first clue I have that there are unread notifications:

If I click on the group, the toolbar at the top of the page gives me a much better idea of what’s going on:

So I logically click and I get this:

I don’t like that I have to click three times just to see my notifications. Yes, I can click on that teeny-tiny number to go to the page properly and wipe them, but what if I don’t want to? Also have you noticed how small the number is? It’s hard to hit if you’re not ‘great’ with your mouse. Guess what I’m not? Great with my mouse. I like larger icons because they’re easier for me to tap. I’m not the only one.

The next problem is the text color. It’s not really all that distinct. It changes to a useful red/orange on other pages, but the subtle grey on blue grey, combined with the size, makes it weird. Compare it to the alerts you get for unread posts in your timestream, or personal notifications:

Clearly their goal is to keep me on that front page (which is obviously why they swap my ‘recent posts’ to ‘top posts’ every chance they get). But even then, once you click on the item, the number goes away but the items are not marked as read. You still have the mark-as-read buttons, which are not very noticeable or distinct. In the case of a page, the number count on the sidebar goes away, but not the one on your toolbar or the notifications page. Welcome aboard the inconsistency train, thy name is Facebook.

Interestingly, this day when I clicked on the “Mark as Read” link, the number dropped from 20 to 1. But there was nothing else to mark as read. All the backgrounds went from pale blue to white, and there was no other indication as to how I might find what was unread.

Eventually I saw the sidebar:

There it was. I hovered over it, clicked ‘Mark As Read’ and that number went away. I had to refresh the page to make the orange alert go away, because apparently that level of Ajax is hard.

My conclusion is pretty simple. Facebook wants me on the main page of their site, my timeline, all the time, and that’s fine for a user. But in doing so, they’ve made administration of their pages and groups overly complex and inconsistent with the rest of the flow of their site. They want me to add in content, but they’re going to decide how I, and others, consume it, which means my ability to easily input and manage is secondary (or even tertiary) to their consumer design.

The pages and groups are a nice idea, but still ill planned for a ‘MySpace’ replacement. The only reason that even worked was because MySpace blew up on itself.

3 April, 2015
Automatic Geolocation

Traveling outside the USA always reminds me of how annoyed I am when I go to websites.

Like most of you, I have a bevy of websites I visit regularly. In my case, a large number of these sites are image or video related, and due to the legality of those things, I find myself restricted based on my current location. It annoys me, because if I pay for a service like my cable TV, why can I not watch it outside my home? Restricting my content based on my location is frustrating. I get CSI at home, but I can’t watch it while I’m here in Japan. This, of course, leads to things like illegally downloading movies, because there simply is no easy, quick, efficient way to acquire those things.

But worse than that is the tacit assumption that just because I’m in Japan, I want to visit the .jp version of a site. The number of sites that auto-redirect me to my current location’s language are not few, and most of them don’t have an easy way for me to click back and explain I’m not able to read Japanese.

For many years I’ve told people that forcing a language choice on users based on their IP is improper and unpredictable. It’s for the same reason I tend not to recommend blocking entire countries from your websites. The probability that you will hit innocents with a broad attack is very high. It’s higher than the chance of rain in Southern California.

So how do you do it right? You have to start by asking the right questions.

What language does the computer use?

You can detect that, you know. If my computer uses English, the odds are that I want to use English. Of course, a French speaker might use my laptop, but that’s on them, and one hopes they know to go to google.fr instead of google.com. Speaking of that…

What URL did I type in?

If I go to a URL directly, I may actually want that URL. This goes for you mobile apps too. If I go to Google.com right now, I get this:

That’s a nice, friendly question in English asking if I’m sure.

Have I been here before?

Cookies. When I go to a site, I get cookies. Those cookies can tell you what language I used the last time. So if you have a flag system where I can pick my language, please do try to honor that. There’s nothing a visitor hates more than having to reset their preferences every time. Facebook, this means you.

Where is my IP?

I know I said not to use this, but there’s a reason I want to ask this. If I take into consideration the URL, the browser locale, and the IP, I have a clearer picture of who’s visiting the site and what they want.

15 October, 2014
Drag to Choose File

I don’t know why I never knew this. Did you know you can drag a file to the ‘select file’ button on Chrome?

You know the button, right, this one that just says Choose File:

I happened to be testing if the drag/drop area was working (it wasn’t) and I noticed the button changed colors when I dragged the file over it:

So I let go and it was there:

And yes, it worked. This will save me hours of work!

1 October, 2014