Menu

Colin Devroe

Reverse Engineer. Blogger.

Twitter’s new character UI

Josh Wilburne, Designer at Twitter:

With this in mind, we designed a system that defines two types of written languages, dense and non-dense, and expands the character limit for non-dense languages. By grouping languages this way, we can give people writing in non-dense languages like English and Spanish the same space to express themselves as people writing in information-dense languages like Japanese. This will make sharing thoughts and ideas on Twitter a lot less frustrating for many more people, while maintaining brevity on Twitter overall.

Twitter’s recent character count increase isn’t as simple as 140+140 (even though Jack tweeted thus). They seem to have done this thoughtfully. I think once the #280characters meme dies down a little things will settle in nicely for Twitter. I’ve already seen some great cases where it was used.

I also very much like the UI they’ve designed for showing you your progress which Wilburne covers in his post.

Creating Summit: The current summit view

This post is the first in a series of posts about my experience building and designing Summit. This post focuses on just one view within the application; the current summit view.

The idea for Summit came nearly 4 years ago as far as I can tell. I’ve hunted around for scraps of paper, digital notes, code snippets to see if I can come up with an exact date but I’ve been unable to. And it has been fits and starts for several years.

When Kyle Ruane and I started on the idea we first thought the UI would be a bit more game-like. I envisioned a 3D model of the current mountain you were hiking that would progress the person up the summit in first-person towards each goal. This was altogether too much work, and far too difficult given my unfamiliarity with the platform. Kyle’s suggestion – again, many years ago – was to use a low poly look. He would craft a low poly representation of the summit and we could allow the user to move around in it, perhaps even spin it around, zoom in-and-out, etc.

I pulled that thread for a very short time before giving up. Remember, we started toying with the idea of Summit before Swift was released. So I was trying to draw this UI with Obj-C. Something I’m even more terrible at than Swift.

Here is what one attempt at drawing progress lines using Obj-C looked like back 4 years ago or so. I took this screenshot in June 2014 and was already labeling it “historical junk” in my files.

The red triangles were goals to meet, the blue line was your path, and the white line was your progress so far. My goal was to overlay this on top of the low poly art that Kyle drew. This was inspired by maps like this. (copied here for archival purposes)

This worked but was not that easy to pull of, introduced more complexity than we needed, and so we quickly shelved the idea until we got more familiar with the platform.

In tandem I began constructing a simple web UI to start cataloging steps from a phone. This was purely to get used to writing code that would track user’s steps, show stats, work on our step algorithm (the code that determines how far up Mount Everest a single step walking in a downtown city parking lot gets you), etc.

It went this way for a few years. I would open up a code editor and begin working on the pieces of Summit; the progress UI, the algorithm, the code to read from a user’s step count or HealthKit or Apple Watch.

In June 2017, when I picked up this project on my own to take on since Kyle had moved away, I decided I needed a simpler approach to the UI. In part because Kyle is the design genius but also in part because I wanted to get as quickly to shipping an app as I possibly could. I prefer to iterate on ideas with user feedback than to work on something in a silo for years. I wanted a way to show the summit, or some visual from the summit, but yet also show one’s progress. And I also still needed multiple goals per summit.

Here are a few drawings from this summer.

See, I’m not an artist. Admittedly, though, this wasn’t an attempt to draw anything beautiful but rather to get a general idea for all of the views I needed to pull off the layout. I needed some labels, some buttons, navigation, etc.

The long goal buttons was really “a punt” on my part. I gave up trying to get Xcode’s Storyboard feature to properly align a changing number of goal buttons (since each summit has a different number of goals) in a way that worked with each device size. It was very frustrating. So I began to go down this path of having them just be full-width, flat buttons.

But then I ran into Brian Voong on YouTube. In most of his video tutorials he suggests forgoing the Storyboard feature and using code to create the UI. Though I didn’t want to lose the progress I had made, I’m so glad that I took his advice. Writing UI directly in Swift is far, far easier (for me)  and seemingly more powerful than using Storyboards.

This revelation allowed me to go back to a drawing I did a month earlier. This one:

On the left, the elements needed, on the right, a rough sketch of a much more minimal and airy design of the current summit view. The goal buttons have varying distances between them relative to how far apart they are in real life (I’m still working on getting this right in the app).

Using Swift I was able to make this happen much easier than Storyboards.

The above is one of the very first swings at this view. It had all of the elements I wanted. And I’ve been iterating on this specific design ever since. I wish I had the hundreds of iterations saved but I don’t.

Here is what the most recent iteration looks like with goal buttons that are easier to determine your progress and other tweaks to make the UI more consistent.

This is the design for this view I’ve settled with for now. I have plans to iterate on this current design for some time before, perhaps, taking a whole new swing at it. Perhaps my skills will grow to the point that I feel confident going back to Kyle’s low poly idea. But, I’m pleased with how it has come along so far.

Rebuilding Slack.com

Mina Markham:

In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes.

She goes on to show tons of details on their latest redesign. There are several bits I found interesting such as their attention to accessibility, how they handle fall backs for IE11, and how they made responsive illustrations.

/via Brad Frost.

Required reading

The first time I linked to Colin Walker, which was only about 4 months ago, it was because he was fiddling with his blog, trying to come up with the right way to display his content for him and his audience.

It is a topic that has fascinated me for 20 years and to see someone else thinking about it out loud is great.

Over the years I’ve tried many, many different ways to layout a blog. Fortunately, I’ve been able to explore dozens and dozens of options due to my work. I’ve designed and developed online magazines, large-scale video blogs, large online libraries of information for teachers, students, television stations. I’ve even had the privilege of working on a network of blogs, called 9rules, where we aggregated hundreds of blog’s content into many categories and sections. The projects I’ve worked on over the years have had billions of views.

So, I can honestly say I’ve thought about this topic as much as anyone alive.

Long, longtime readers of my blog will remember how I wrote about how the blog format needed to be disrupted back in 2011. This post has ended up being a tent pole on this blog. Here’s the crux in a snippet:

I believe the blog format is ready for disruption. Perhaps there doesn’t need to be “the next” WordPress, Tumblr, or Blogger for this to happen. Maybe all we really need is a few pioneers to spearhead an effort to change the way blogs are laid-out on the screen. There are still so many problems to solve; how new readers and also long-time subscribers consume the stream of posts, how people identify with the content of the blog on the home page, how to see what the blog is all about, how to make money, how to share, and how interact and provide feedback on the content.

While the lion’s share of people’s microblogging, photos, video, and audio are still going to the big network sites – there are a few people who are rolling up their sleeves and trying to figure out how blogs should be laid out in 2017 and beyond.

Colin Walker is one of those people.

If you go back through a few posts from this month from him (I wish he used tags) you’ll see how Dave Winer’s post here sparked the idea of a required reading page. And how he’s been thinking about it for a few days now. I understand how he feels. When that seed is planted it is tough to uproot.

One of my reasons for saying that the blog format is in need of disruption has to do with the brand-new visitor’s perspective of a blog. On any given day if a new person were to show up on my site they’d only see the latest few posts that I’ve written. I could be making a joke, linking to a friend, writing about how to save battery life on the new Apple Watch, sharing some thoughts on Bullet Journaling using audio, or sharing a photo of a recent evening at a local lake. Would they come away understanding “what is Colin’s blog about?”. I don’t know. I think some days are more representative of what I’d like my blog to be than others. Some entire weeks probably poorly represent what I’d like my blog to be.

Currently my site’s layout is fairly simple. I’ve chosen this mostly due to the fact that traffic to my site is primarily to single posts and overwhelmingly viewed on mobile devices. So if I were to begin fiddling like Colin Walker is… I’d likely start with what my single post design is, rather than my homepage. More people are introduced to my blog through a single post than the homepage.

Based on Colin Walker’s thoughts I may update my about page this week a bit to include a section explaining what my blog is primarily about. For me, I think that will be enough. But I don’t feel like it solves the issue Winer and Walker bring up. I’m anxious to see what Walker ultimately comes up with.

Ryan Lau on iOS 11’s inconsistencies

Ryan Lau:

The unfinished feeling in iOS 11 mostly comes from UI and animation. UI elements in iOS are quite inconsistent, mixing a variety of UI elements, which might look quite similar but introduce a disconnected feeling for UX. The inconsistency of those elements majorly stems from those UI element updated in iOS 11, such as Large Title and new Search Bar. In my opinion, those newly introduced elements, which might be unfamiliar and new even to Apple engineers, have caused many inconsistent UI experience in iOS 11.

I’m using the public beta of iOS 11.1 on my iPhone and iPad and, as of this writing on Tuesday, October 3, many of these examples are still plaguing iOS 11. Many people won’t notice these types of things but as software designers once we see them it is impossible to ignore them.

I’ll bet that most of these inconsistencies will take several iterations of iOS 11 to clean up. Meaning, it won’t be in this calendar year.

Brad Frost on “full-stack developers”

Brad Frost:

The term “full-stack developer” implies that a developer is equally adept at both frontend code and backend code, but I’ve never in my personal experience witnessed anyone who truly fits that description.

In many of the descriptions I’ve seen it goes even further than that. Sometimes full-stack developer refers to someone who can also administer server architectures or cloud services or do database work.

There are certainly a number of people who can fumble their way through all of these things. I consider myself one of them. But I wouldn’t call myself great or even very good at any one of them. There is nearly no one that is great at all of these things. I’ve only seen perhaps one or two in over 20 years of banging away at this keyboard.

This is also an excellent point from Brad:

Large organizations have the ability to hire specialists, which is why I get so confused why so many companies proudly declare they only hire full-stack developers. Having team members that can own the frontend experience is a good thing. Having team members that can own all things backend is a good thing. Having everyone work together to create successful products is a good thing.

No one should be ashamed that they are very good at one thing and not as good at another. Embrace that fact and become an expert.

Goodbye Google.com

BBC:

Google is adding a personalised Facebook-style news feed to its homepage – Google.com -to show users content they may be interested in before they search.

End of an era.

Spine Magazine

Spine Magazine:

Spine was founded in 2014 by Emma J. Hardy, and covers creative and production aspects of the book publishing industry with a primary focus on book cover design. Its mission is to offer creator insight, long-form stories, product information, and community content for an audience that is highly enthusiastic about books.

The first piece I read on Spine was this interview with Daniel Benneworth-Gray (who has an excellent blog btw) by Suzanna Baird (whom you may remember from the Dribbble Blog Courtside). It won’t be the last piece I read there. I’ve just subscribed.

Colin Walker on macOS software

Colin Walker:

Using OSX can be more intuitive at times but it is visually inconsistent. It may have been through various aesthetic revisions but it can feel old. I think Microsoft has done a better job of enforcing a standard look for applications on the desktop and the Windows design language is now generally more modern.

In the early 2000s when I jumped from Windows to the Mac I felt this very same way … except I was describing the Mac as generally more modern and Windows as visually inconsistent. It is interesting to see a new Mac user’s perspective.

Even today, when I use a Windows 10 computer and click down a few screens I find it terribly inconsistent. I see stuff that looks like Windows 98 to my eyes sometimes. I don’t see that in macOS very often – if at all. But, I can see Walker’s perspective. macOS does feel a little long in the tooth to me too. Not compared to Windows 10 but just that the overall design language is stale. Perhaps High Sierra will spruce things up enough to keep it fresh.

Social Thoughts

Me, in 2011:

I believe the blog format is ready for disruption. Perhaps there doesn’t need to be “the next” WordPress, Tumblr, or Blogger for this to happen. Maybe all we really need is a few pioneers to spearhead an effort to change the way blogs are laid-out on the screen.

I still feel that way over six years later.

Colin Walker has a personal blog he calls Social Thoughts. If you read his most recent few weeks of posts you’ll see that he is toying with several subtleties to how his blog looks and works. Of course he has microblog posts, similar to my statuses, but he also has longer form posts. And he’s struggling with how to show them, how to segregate them into feeds (or not), etc.

Like him I too play around with how my blog looks and works. You can see that in my commit history since my WordPress theme is open source.

Looking at his blog’s front page, however, I think he’s onto some interesting ideas. One example is how each day’s content is separated (like blogs used to be). Another being that he has a small indicator for when there are comments on a post. But my favorite thing is that he’s sharing these little experiments out in the open. I’m looking forward to seeing more.

Looking beyond launch

Jeremy Keith regarding Clearleft’s upcoming rebrand:

I think it’s good to remember that this is the web. I keep telling myself that we’re not unveiling something carved in stone. Even after the launch we can keep making the site better. In fact, if we wait until everything is perfect before we launch, we’ll probably never launch at all.

This is precisely what we thought when we redid Condron Media’s site this week. It is no where near complete. It works. It works on all screen sizes. And it was enough to get started. We plan on releasing new content, updates to the messaging, and even new page layouts each week for many weeks.

On rebranding

Over on our company blog we published our recipe for rebranding a company. Here’s a snippet on how our outsider view is an advantage:

Our suggestions and feedback come with no internal bias, no politics, no fear of losing our jobs, and certainly no fear of sounding stupid. We’re experts at dumb ideas. Out of dumb ideas come fruitful discussions, fun tangents, and exhausting possibilities.

If you need that sorta thing, reach out.

A custom skin for MyFantasyLeague

Kyle Ruane on why he created a custom skin for MyFantasyLeague:

There are things on that page that defy explanation—nested tables driving layout, 8px text, inline styles on everything, five different ‘main’ navigation elements. One big dumpster fire. And this is actually one of the better views in terms of usability.

The power of the open web. If you don’t like something, you can change it.

Instagram’s new look

Ian Spalter, Head of Design at Instagram, on Medium:

The evolution of the community has been inspiring, and we hope that we’ve captured some of the life, creativity, and optimism people bring to Instagram every day. Our hope is that people will see this app icon as a new creative spark — something to have fun with and make their own. We’re excited for where this will take us.

The knee-jerk critiques were flying all over the place yesterday; both online and off. Obviously Ian and his team have had a lot more time with this new icon, and app design, than we have and we should allow it some time to sink in before forming any firm convictions.

My first reaction was that I loved the app design (though I feel some of its personality has been stripped like most iOS 7+ apps) and that the icon will need more time to settle in.

The one piece of context all of us on the outside are missing is what Instagram’s vision for the future is. They likely have an idea for where they’d like their community, application(s), and platform to be in the next 3 to 5 years and I’m sure this re-branding exercise plays into that. So give Instagram a year or so and then see how this new icon sits.

Either way, well done to the team at Instagram for putting something out in the world.