Category Archives: User Experience

More on 280 characters

For this week’s Core Intuition, Daniel and I spend the whole show talking about Twitter’s 280-character change and related fallout. It makes a good complement to my initial blog post, as well as yesterday’s episode of Timetable.

And of course I liked this part of Colin Walker’s blog post:

Having gotten used to a 280 character limit on micro.blog I can honestly say it makes a world of difference.

Dave Winer wrote about the need for Twitter to take risks:

So if you think the 140-char limit is so great, why isn’t Twitter making money for its shareholders? If you were management at Twitter would you be conservative or would you take risks? As a shareholder, I want them to take risks. Big ones. Why not? They don’t really have anything to lose.

My daughter’s Twitter account has access to the new 280-character limit, so I’ve had a chance to see the new UI. Instead of counting down, it uses a circular progress bar until you get near the end of the limit. The UI is further proof that Twitter didn’t make this change on a whim. They plan to ship it.

Micro.blog post editing

Micro.blog users have wanted the ability to edit microblog posts for a while. We planned to add it, but first I thought we needed an edit history and probably a window of time during which edits are allowed, to prevent people from abusing edits by changing the meaning of a post in an earlier conversation.

While I still want those things, I realized that they were just excuses to put off implementing the feature. And with full pages and longer posts, editing was increasingly a big omission.

This week I rolled out a complete overhaul to the posts interface under your Micro.blog account. The layout is better, it’s more prominently linked in the UI, there’s an easy way to switch between posts and pages, and you can finally edit posts.

Micro.blog screenshot

There are a couple quirks of the UI still to improve. For example, if you’d like post edits to be reflected in the timeline, you should click the Remove link in the timeline so that Micro.blog pulls the latest version from your microblog. I’ll be working on polishing those areas over the coming weeks. But already it is much better. Enjoy!

Markdown replies in Micro.blog

Micro.blog now has Markdown highlighting as you type in replies. Micro.blog has had basic Markdown support since the Kickstarter launch, but we’ve been improving how it processes Markdown and where the visual highlighting is used in the web UI.

Here’s a short screencast of the new reply UI:

Don’t have a Micro.blog account yet? We’ll be inviting more users soon. You can sign up on the announce list.

Safari pinned tab favicons

In a post on Daring Fireball today, John Gruber makes a convincing argument for Safari showing favicons in tabs:

With many tabs open, there’s really nothing subjective about it: Chrome’s tabs are more usable because they show favicons.

Even more surprising to me is that Safari doesn’t use favicons for pinned tabs. Instead it uses a special monochrome vector icon. Ever since adding favicon support to Micro.blog, I’ve had on my to-do list to create one of these vector icons for Safari, but so far I haven’t been able to justify the effort. (And judging by a handful of my favorite sites, no one else has bothered to create a pinned tab vector icon either.)

Why does Apple require a separate icon format here? Probably for the same reason as John Gruber’s guess about normal tabs:

I don’t know what the argument is against showing favicons in Safari’s tabs, but I can only presume that it’s because some contingent within Apple thinks it would spoil the monochromatic aesthetic of Safari’s toolbar area.

It seems clear that these pinned tab vector icons are a dead-end. There are already too many sizes of favicons. Safari should have basic favicon support in tabs and do it with as few extra icon files as possible.

The iOS 11 App Store redesign story

Three years ago I wrote that Apple should end the App Store top 200 lists, learning from Beats Music how to double down on curation:

I wrote about Beats Music earlier, how it underscored to me that Apple needs to find the next product category to fall in love with, just like they used to feel about music. Of course we know that Apple already loves apps. Show that by doubling down on featured apps, staff picks, and app playlists.

And:

Apple shouldn’t wait until Thursday to feature a few great apps. Feature apps all the time. They’re on the right track with some of the “best of” sections in the store, and with the “Near Me” feature. Go a little further and it will make all the difference to bubble up great apps, and let the junk in the App Store fade away.

I think they’ve done it for iOS 11. While the top charts aren’t completely gone, they no longer dominate the App Store user experience. Featured apps are center stage.

Product manager Pedraum Pardehpoosh at WWDC even used the same phrase “double down” when describing Apple’s new focus on editorial content. During session 301, he said:

We thought this was a perfect time to double down on the editorial curation that’s distinguished the App Store since its conception.

Joe Cieplinski addresses the information density in the new App Store, pointing out that apps will be featured every day:

That’s a big change from the weekly update schedule Apple has maintained since the beginning of the App Store. You can’t name something “Today” and then not update it every day. So instead of a few new items getting featured once a week, something new will be featured every single day.

The “Today” tab is effectively a blog: reverse-chronological posts about what’s noteworthy in the store. It’s a much better default UI for content that is actively curated.

The old App Store was designed like a database. Databases are good at showing grids and lists from an algorithm. But the App Store should tell a story about new apps. A blog-like format is the best way to do that.

This plays to Apple’s strengths in design and taste. Where Google might hire more engineers to improve their store, Apple should hire more writers.

So far I’ve only used the new App Store on my iPad, and only for a few days. After we’ve all lived with it for a few months, it will be easier to judge whether it works for developers. But it’s almost exactly what I was hoping for a few years ago. This redesign for iOS 11 is one of my favorite things to come out of WWDC.

Fake news as propaganda

In yesterday’s essay about Twitter, I also linked to my post on Instagram’s lack of native reposts. Jason Brennan has written a follow-up about fake news and propaganda, exploring what we can learn and apply to microblogging:

Aside from the normal reasons propaganda exists, it exists on social networks like Facebook and Twitter because it can exist on those networks. It’s profitable and useful for the parties manufacturing and disseminating it. To Facebook and Twitter, upon whose networks it propagates, it doesn’t really matter what the information is so long as it engages users. Facebook’s apathy to propaganda is regularly exploited.

Hillary Clinton also connected fake news and propaganda in a speech this week:

Let me just mention briefly one threat in particular that should concern all Americans, Democrats, Republicans and independents alike, especially those who serve in our Congress: the epidemic of malicious fake news and false propaganda that flooded social media over the past year. It’s now clear that so-called fake news can have real-world consequences.

The internet is at a crossroads. Entrepreneurs love free speech, scale, and money, but those don’t always align in a good way. As much talk as there is of making an impact, very few leaders in Silicon Valley seem to think deeply about consequences.

Fake news and Instagram

Twitter has retweets. Facebook has sharing. But Instagram has no built-in reposting. On Instagram, there’s no instantaneous way to share someone else’s post to all of your followers.

The first version of Instagram was built by a very small team. They’ve always grown slowly and expanded the UI thoughtfully. I think the lack of a repost feature was deliberate.

When you have to put a little work into posting, you take it more seriously. I wonder if fake news would have spread so quickly on Facebook if it was a little more difficult to share an article before you’ve read more than the headline.

It’s not easy to build software that encourages good behavior. When I look at my Instagram timeline I see beautiful photos, hand-drawn art, and snapshots of everyday life. I see the very best of the world. It’s not the full truth, but it’s all true.

Instagram was no accident. The only question: was it unique to photos, or can the same quality be applied to microblogging?

SXSW and designing for Apple Watch

As I mention on the latest episode of Timetable, I haven’t attended SXSW in several years. I still think it’s right for me to skip it, but then sometimes I’ll hear about UX and iOS panels going on at SXSW, and I’ll remember some of the great parts of the conference that I do miss.

Conrad Stoll spoke on a panel at SXSW this year about his experience building Apple Watch apps. He’s had a few great blog posts recently, about both Apple Watch user interface design and also one on designing in Swift. For planning what features to include in your watch app:

“When it’s time to gather around a whiteboard and start designing your Apple Watch app, draw all of your features and start discussing some of your least obvious ones. It’s very likely that one of them represents a better use case for the watch. If you start with the secondary features you might realize that focusing there can actually improve the utility of your overall product.”

Blogs like Conrad’s are a great reason to keep using RSS. He’s not posting every day so you may forget to check the site, or miss the links on Twitter if they aren’t tweeted or retweeted when you happen to be paying attention. The best way to guarantee you won’t miss it is to subscribe in an RSS reader.

There’s a related side discussion on the Bill Simmons podcast about reading headlines instead of full articles. There’s too much information out there, and it moves too quickly, so we’ve trained ourselves to just scan headlines and comment on Twitter without going deep. That leads to increasingly ridiculous click-bait titles as publishers try to grab our attention. The only way to fight back against that trend is to slow down and read a few thoughtful essays in RSS, or work through the queue in Instapaper.

Slow transitions in watchOS

Much has been made of the Apple Watch not being fast enough. It’s too slow for full iPhone-like apps, of course, but that doesn’t bother me because I think the watch is pretty great at its core features. But I’ve noticed that it’s slow even for some of the simple stuff, and I don’t think this can be blamed on hardware alone.

Take notifications, for example. There are several distinct steps to notifications after you receive one:

  • Tapping a notification.
  • Waiting for it to load, which is an animated transition.
  • Optionally scrolling to the bottom to read it all.
  • Actually tapping Dismiss to get rid of it.

There’s a tiny lag between all of these. I frequently can’t scroll right away, as if it’s not responsive until the animation completes. The Dismiss button also doesn’t seem to be enabled immediately, requiring a 2nd tap before it “clicks”.

I bet these are solvable with a software update. Shorter animated transitions or pre-loading notification text might go a long way to improve the experience.

The incomplete iPad Pro

I ordered my iPad Pro online and picked it up in the store today. My excitement for this device is all about the Pencil, which doesn’t ship for a few more weeks. The store didn’t receive any and employees have no idea when they will get it. They didn’t receive any Apple keyboards either, so I left with the only remaining accessory in stock: the white smart cover.

I don’t think I’ve ever been less excited to walk out of a store with a brand new $800 gadget. The iPad Pro has so much potential. I think it’s going to be a success and I’m building apps for it. But without the Pencil and keyboard, a significant part of the appeal is missing. And worse, developers who need a Pencil to start testing their apps — especially those apps like the one I’m working on that already supports third-party stylus pressure — are put at a month-long disadvantage compared to Adobe and the other early partners.

I enjoyed reading the iPad Pro reviews this morning, especially from Daring Fireball and MacStories. But those reviews describe a product that just doesn’t exist today. The iPad Pro as advertised on Apple’s web site and in beautiful marketing videos isn’t ready, and I wish Apple had delayed the whole launch until they could deliver these important accessories for a complete user experience.

Stars vs. hearts and Twitter’s decline

In an essay about Twitter written in 2014, Ben Thompson described why he believed in the service:

“I think this actually gets to the problem with Twitter: the initial concept was so good, and so perfectly fit such a large market, that they never needed to go through the process of achieving product market fit. It just happened, and they’ve been riding that match for going on eight years.”

I’ve always thought the same thing. That Twitter started out so good, with such strong core features, that those basic features have carried it through all the years of missteps and inaction. But it’s not just that the features are “good” (although they are); it’s that they are unique.

Listening to the Connected podcast the other day, Federico Viticci and Myke Hurley made the statement that only nerds care about Twitter changing stars to hearts, favorites to likes. I was nodding in agreement until I talked to my daughter. She also didn’t understand why they would change away from stars, and she’s been on Twitter less than a year.

It’s not just nerds. Many new Twitter users recognize the subtle difference implied with hearts. But I realized that there’s something even more important about what this change says. Why is my daughter even on Twitter, in addition to Snapchat, Instagram, Facebook, and Vine? Because — even if most people can’t pin down exactly what makes it special — everyone knows Twitter is different and interesting.

All Twitter has going for it is its uniqueness. The timeline user experience, the retweets and favorites, the hashtag, and the short 140 character posts. Changing any of those key strengths to be just like every other social network means they’re watering down their own potential impact. Eventually that approach will produce a bland product that has no unique qualities.

We’ve already seen the timeline experience significantly altered. Promoted tweets, “while you were away”, inline conversation threads, and Twitter cards. Twitter in 2015 looks a lot more like Facebook than it did a few years ago, to everyone not using third-party Twitter apps.

Growing the user base is fine. But making Twitter more accessible to new users won’t do any good if you lose the much larger base of passionate users who have loved the product for years because it’s unique. You’re not going to beat Facebook by becoming even more like Facebook. If that’s Twitter’s strategy, then the service is already in decline.

Watch form over function

Everyone’s thinking the same thing: Samsung’s new smartwatch looks significantly better than the Apple Watch. Even the rounded scrolling control looks as usable or more usable than Apple’s digital crown. If Apple tried multiple designs internally, including a round watch — and I’m sure they did — why did they opt for a nerdy square shape that looks more like a computer than a watch? Especially in a product with such a focus on fashion that they felt the need to charge $10,000 for the high-end models.

Surprisingly, this might be Apple showing they can still choose a functional user experience over purely beautiful form and design. Square looks worse but it’s just more practical for reading text. The digital crown is a better fit for scrolling vertically.

It’s rare in the modern era of Apple (post-2000 or so) for the company to sacrifice beauty for usability. The iPhone is always thin at the expense of battery life. Mac scroll bars are hidden in the name of cleanliness. The new MacBook has a single new cable type which no one owns peripherals for. But with the Apple Watch, I think they built something with a foundation that could last for years, despite its initial awkwardness, and square was the right call.

Two weeks notice: writing documentation

Boy Scouts have a saying: leave no trace. One of its basic principles is that when you pack up your camp site, make sure you clean up all the trash. The place should look even better than when you found it.

It’s not a bad principle to keep in mind when leaving a job, either. Projects should be in a good state. I’ve fallen short in one key aspect of this — a conspicuous lack of unit tests in my web apps — but I’ve been more successful in other areas, like up to date versions of Rails and pretty comprehensive documentation.

Documentation is also an easy thing to improve at the last minute. Today I’m reviewing some API docs from top to bottom again, making sure that the confusing edge cases for how an app works are well covered. For my job at VitalSource, this means editing in Confluence.

The apps in Atlassian’s main suite that I’m familiar with — Confluence, Jira, and HipChat — have improved in small increments over the years. I makes sense that they would move fairly slowly; the apps are heavily used in larger companies, so a major redesign or feature change would not be well-received by many of their customers. Of those 3 apps, HipChat seems easily the best designed, and I expect having Slack as a competitor will keep them focused and driven to improve the app.

This post isn’t meant as a rant against Confluence, but as I use it’s default markup language or WYSIWYG editor I’m reminded of just how much I enjoy writing in Markdown instead. For my own apps, I’ve experimented with writing documentation in Markdown hosted on GitHub, which gives me easy publishing and version history. Tweet Marker, for example, pulls a Markdown file from GitHub directly and formats it inside its own web interface for Twitter app developers.

As usual, open formats like simple text files are a great choice for any writing that you want to last. For my new microblogging project, I need to repurpose a lot of writing I’ve done on this blog and move it into more formal documentation. I’ll probably use Markdown and GitHub for that as well.

No perfect iPhone size

Some people bought the iPhone 6 and then went back to the 5S. Some people bought the iPhone 6 Plus and then tried the 6. Some worked their way up to the 6 Plus after adapting to the 6. Some never upgraded to the 6 or 6 Plus because both are too big.

Marco’s post is a good formal summary of a few write-ups I’ve read this week:

“Having used an iPhone 6 full-time from its launch until these 6 Plus experiments over the last few weeks, I can confidently say that neither phone is extremely well-designed. Both have nontrivial and completely avoidable flaws. But the 6 Plus has bigger advantages over the other phones, while the 6 seems to sit in a mediocre middle ground.”

The lesson from all these switches couldn’t be more clear: there’s no longer one perfect iPhone for everyone. What works great for one person might be terrible for someone else. I personally love the 5C design — the size of the screen, the way the plastic feels in my hand, flipping or spinning it on my fingers without worry that it’ll slip, using it without a case, adding a little color to my life — but many people never even tried it because it contains underpowered hardware compared to the latest models.

Apple would be crazy to discontinue any size. I’m more convinced than ever that we’ll see a 4-inch 6C alongside a new 6S and 6S Plus later this year. They won’t have identical specs, and that’s okay. I’ll happily pick the 4-inch model even if its camera is a year behind the cutting edge. The iPhone market is so ginormous now that I know there are millions of people who feel the same way.

Footnotes follow-up (and the Newton)

I expected to get a little more negative feedback on my footnotes blog post than I did. Most feedback was pretty good. Thomas Brand agreed but also wrote:

“That being said, footnotes can be fun when used sparingly. They lend themselves to the kind of personal anecdote common to the tech blogs I read. If you are going to use footnotes to break up your articles, Bigfoot.js is not a bad way to do it.”

Definitely. If you’re going to do footnotes, might as well do them with the best user experience possible.

Thomas has had some really good posts lately. Before it expires off his home page, don’t miss the recent one on the Newton MessagePad 2000:

“I doubt a 25-MHz ARM710 would have been very effective as a laptop replacement, and it the Newton engineering team knew it. That is why the MessagePad 2000 was simultaneously designed with two different CPU architectures and its own form of Universal binary.”

I couldn’t afford a MessagePad 2000 at the time, but I still have my MessagePad 130. Along with my original iPhone, I’ll never part with the Newton — a wonderful device to use and develop for that was way ahead of its time.

iOS 7 and UI debt

Jared Sinclair writes about iOS 7 as a squandered year for third-party developers:

“Fast-forwarding a year, the effect that iOS 7 has had on third party development is disheartening — which sounds like a fatuous thing to say, since there have been so many well-liked redesigns over the past year. But that’s the rub: the vast majority of third-party developers’ time has been spent redesigning and reimplementing apps to dress the part for iOS 7.”

I agree with Jared that it was a sort of lost year for app features, but Brent also has a point:

“Jared argues that iOS 7 wasn’t urgent, that evolution rather than revolution would have been fine, since customer satisfaction was extremely high with iOS 6. In retrospect I agree, but were I at Apple I would have argued that the situation is like tech debt — UI debt — and it’s best to deal with it quickly, completely, and early.”

They had to deal with it all at once because UIKit’s look and feel didn’t really evolve the same way Mac OS X usually does, a little each year. Even Aqua, the most dramatic change ever to the Mac’s UI, was fairly straightforward for developers to adopt; if you stuck with consistent Mac controls, you got a lot for free. There was very little of that kind of consistency on iOS because developers frequently built their own custom UIs which had to be thrown out when iOS 7 happened.

Tint color misuse

It has been nearly a year since the first iOS 7 beta, and something about tint color still bugs me. In fact it bothered me enough at the time of the early betas that a filed a bug on it with Apple, something I very rarely do. The problem isn’t so much in the concept of tint color, which I like; having a consistent color for buttons and links, especially now that buttons are so understated, makes a lot of sense. The problem is the implementation in apps that use tint color anytime they want to highlight something, whether it is tappable or not.

Here’s an example in Apple’s calendar app. It uses a red tint color for buttons, but it also highlights the current day with a round circle using the tint color. It looks tappable, but it’s not.

Calendar

And here’s an even worse example, from the App Store app. “Categories” in this screenshot is a button, but “Paid” directly underneath it — same blue, same font and style — is just highlighted to show that you are viewing paid apps. It’s actually “Top Grossing” that is the button.

App Store

These kind of usability mistakes turn the great potential of tint color into a disadvantage. It’s like underlined text on the web that can’t be clicked. Apps should use tint color to improve usability, not to become even more difficult to use than if everyone rolled their own button styles.

Here’s what Apple’s iOS 7 UI Transition Guide says:

“In iOS 7, tint color is a property of UIView. iOS 7 apps often use a tint to define a key color that indicates interactivity and selection state for UI elements throughout the app.”

But that’s not specific enough. The app screenshots above are following this rule, and it still looks wrong. Bold text or a gray background for highlights are much more effective to show selection state than tint color. I would completely avoid tint color for selection state except for controls that have 3 or more segments, such as a tab bar, and even then sparingly. Highlighting a 1- or 2-segment control with tint color is always going to be confusing, because the selected segment looks like it can be tapped.

With this in mind, fixing the App Store app is a simple change:

App Store

(You could make the “Top Grossing” button blue or not. I don’t think it’s necessary in this case.)

The best iOS 7 apps I’ve seen follow the spirit of Apple’s guidelines, but they know when to push beyond Apple’s built-in apps and when to pull back and do less. Tint color seems like an obvious case of where we should be more consistent and strict than Apple intended.

Layered glass

Nate Barham describes iOS 7 as layered glass:

“The best developers will see iOS as an operational model, not a visual one. Imagine a Tapbots app that, instead of removing the cute ‘I’m a twitter robot in your phone!’ aesthetic, doubles down on it. Zooming metal plates, ratcheting gears not shadowed from without but appearing from within the device, only now it isn’t a robot-esque layer over the stock controls, the UI becomes the character that the developer envisions—even more so than it has ever done before.”

I really like this post, but I’m not totally sold on the paragraph quoted above. Done right, it could be brilliant. But this is a very difficult thing to pull off, keeping the playful spirit of Tweetbot with a lighter, minimalist iOS 7 UI.

And related, if you missed Christa Mrgan’s recent Macworld essay, she also covers how iOS 7 will use depth and motion to switch from “faux 3D to real 2.5D”, with an example from Adobe’s After Effects. Makes me wonder if designers will need new prototyping tools.

The $229, camera-less iPod Touch

Ahead of WWDC, Apple dropped the 4th-generation iPod Touch from their lineup and replaced it with a slimmed down $229 iPod Touch. To achieve this lower price, they made a big sacrifice: no rear-facing camera.

Most surprising to me is that this change comes just weeks after the iPhone’s Photos Every Day commercial, one of the most beautiful ad campaigns Apple has ever run. Removing the camera from the iPod Touch transforms it from a peer of the iPhone, capable of the same kind of photos and videos, to nothing more than a game and internet device. It is the only shipping iOS device that can’t be used as a traditional camera.

As we know, people frequently use even the iPad as a camera, holding it up to take pictures at concerts, their kid’s basketball game, and at any family gathering. When all you have is a cheap phone, you absolutely want to use the iPad as a camera, because it means you can sync and share the photos.

My daughters have the older, smaller-screen iPod Touch and frequently use the camera with friends. Instagram, in fact, has become very popular with teens and pre-teens. Can you imagine how great it would be to have grown up in the 1980s, for example, with the ability to take essentially unlimited photos? Angry Birds may have taken the mobile spotlight when iOS went mainstream, but in a dozen years when these games are just a fun memory, we’ll still have some of the JPEGs, first-hand accounts of life in middle school.

I’m sure dropping the rear camera was a very tough decision for Apple, especially thinking about wanting more memory and speed to run iOS 7. But I’d rather have no FaceTime, slower CPU, less memory, and only 8 GB of storage any day of the week if it meant I could take photos. The rear camera is priceless.

Design in grayscale

Adam Keys has several tips for programmers, to make our web sites look better by keeping things simple. I often just use grayscale, too:

“Most important: design in greyscale. Color is hard and can lead to tinkering. My goal is to get in and out of the front-end bits quickly, so tinkering is the enemy. Greyscale is one dimensional, greatly simplifying matters. Give important information higher contrast and less important information or ‘chrome’ less contrast. Now you’re done thinking about color.”

These days I also start everything with Bootstrap, which adds great defaults for layout, buttons, and text. It makes everything looks better, right away. It’s not a replacement for a designer, but it does save hours (or days) of getting the basics up and running.