Blog

#design

I love a good UX breakdown, especially in areas I lack familiarity. The Turn Signal blog just posted a great write-up on how to design better digital instrument clusters for automobiles.

Read the Article

Designing a Hand-Crafted App in 2018

Early this year I started playing with an app idea that became Selah Chords. I had a working prototype of the engine that would power it. I knew it could work. But what would differentiate it would be care for UI. Make it easy to do the things that needed to be easy. Instead of focusing on all the other tools that could be added— literally, the competition nearly includes the kitchen sink in their apps— I would focus on doing one thing really well.

A recently (at the time) published article from Michael Flarup had me encouraged to explore skeuomorphic design again, something I had been itching to do for years. To be honest, app design today is too bland. Most of us know that. It used to be full of texture and UI work, parts of the process that would take months. Each app had personality. Then iOS 7 happened. And all that work got thrown aside. Read that article.

I explored a number of paper, notebook, and other interface metaphors for Selah, trying to find a voice that could work. And in the end, I could not find a voice there. And the reason was because I wanted to rely on the screen, not the physical world’s physics.

I had one major interaction that needed to be nailed, in my opinion. Finding a chord. Seems easy, I know. But everyone makes the easy hard, for some reason.

Guitar Gravitas

This is a great app. I honestly use it quite a bit, as it supports chords that Selah Chords does not support. But finding a chord in Guitar Gravitas sucks. First, the root note selector is a slider. Second, the selected state is a dotted, 1px tall underline. This thing is horrible.

Then there is the scroll direction change in finding a chord. This app uses multiple panels that all scroll independently. This is not an iOS convention and instantly feels off. Mind you, on iPad, this is better because of the screen size.

The biggest reason that I use this app regularly, as opposed to others, is because of the chord charts. It shows me tons of voicings without the trouble that other apps make of that.

Guitar Tuna

One of the most popular guitar apps, as it is a tuner— a pretty good one— that also provides other tools. Personally, if you want a good tuner, get Fine Tuner, but that is a different topic. The chord library tool is what we are focusing on here. Once again, sliding lists for root and chord, but made worse by the scroll for voicing. Guitar Tuna only provides a handful of voicings— standard movable shapes, essentially. But to see them, you have to flick one-by-one through them.

I do not use this app much. Mostly because the interface is less than ideal.

Guitar Master

Another popular guitar app. Tuner? Check. Metronome? Check. Scales? Yup. And chords. That root note selector is better. All on one screen. No scrolling. But now to select a chord, you have to find it in a scrolling collection view— rows and columns— and expand it.

Wait, don’t tap— damn. It just played the chord. You wanted to see more voicings, didn’t you. Yeah, tap that small expand icon. And now, when the collection would have made since, you get this scrolling list of voicings and a guitar neck that takes up two-thirds of the screen.

Finding my Voice

As I looked to solve this one interaction, Jared Sinclair shipped ’Sodes. And boy. While not skeuomorphic, while super minimalist, it wasn’t boring. It wasn’t bland. Subtle gradients, sparse, well-thought our content layout design. The content was king, not the interface. But even without the interface being king, it didn’t get so far outta the way that you were confused. Buttons had borders. They looked like buttons.

So instead of making beautiful, meticulous textures, I started storyboarding animations. The first test of what I deemed gooey animation was built.

Instead of sharps getting their note name repeated, the sharp extended the preceding note button. The construction under the hood is fun, taking accessibility into consideration with an accessibilityLabel of the full name (“C#”).

And then the sliding selection. Clear selection state was important. At this point I was using Guitar Gravitas and that was my biggest grievance. Animating this allows for a fun, hand-crafted interaction, while not getting in your way. This is done by making the animation quick and informative.

The chord selector is brief. I didn’t need to support a hundred chords. Why? Because the most common chords can be summed down to a handful. I’m not looking to build the only chord finder you use, just your favorite.

Is Skeuomorphic Dead, Then?

I hope not. What I know is that it wasn’t right for Selah Chords. Which surprised me at first. I wanted it to be right. It might be for your app.

What’s Next?

Banjo support is coming. Selah Chords started with guitar, ukulele, mandolin, and dulcimer. I am adding banjo. Also copying or dragging voicings out of Selah Chords is coming. And favorite voicings. And who knows what else.

Get Selah Chords today. It’s free and will become an essential part of your musical toolkit.

I’m Sorry Dribbble

What I witnessed on a Dribbble shot the other day was more than disturbing as two men, David Kovalev and Eric Hoffman, voiced a concern about the nudity and sexuality of the shot being inappropriate for this site: they were torn apart by rabid wolves, insulted and mocked and the bullying continued onto Twitter. I myself got roped in when I expressed my solidarity with them and had to fend off a troll that ended his attack by sending me multiple nude images on Twitter.

This community once was a place to talk and receive feedback from amazing designers and peers unlike anything that came before. While DeviantArt was chock full of immature teenagers and young college students, Dribbble was largely full of professionals.

Now, it has clearly devolved into a cesspool where those that are loudest and rudest get the most amount of credit, and those that dissent are mocked and trolled to the applause of everyone else.

This isn’t a community I want to be a part of, a community I want to support. Something has to change or I will likely not be renewing my Pro membership next year.

I posted this on Dribbble the other day after two men and myself were bullied on a thread of a nude shot— that another player posted— and followed onto Twitter for more ridicule for suggesting that this was not the place for these kind of images. Today I received the following from the Dribbble team:

Not only have they removed my shot and reprimanded me for “preaching” and “stirring up controversy”, they have threatened to suspend my account if I break their rules again. Rules that also disallow porn, nudity, or sex in shots on their site. But the original shot that we voiced a concern about remains. Along with the comments featured in my shot.

This is 2015, when people that complain about nudity on a site meant to be work friendly are threatened with suspension and bullied by the community for speaking up. Because #tolerance.

Invisible Design and Apple’s Watch Faces

Yet what Dye seems most fascinated by is one of the Apple Watch’s faces, called Motion, which you can set to show a flower blooming. Each time you raise your wrist, you’ll see a different color, a different flower. This is not CGI. It’s photography.

“We shot all this stuff,” Dye says, “the butterflies and the jellyfish and the flowers for the motion face, it’s all in-camera. And so the flowers were shot blooming over time. I think the longest one took us 285 hours, and over 24,000 shots.”

Such a great article from Wired on the watch faces from the upcoming Apple Watch. I know for my wife, the butterfly face will be her go to. Or maybe the Mickey Mouse. She wants a Tinkerbell one, but I’d be willing to bet that developers will be able to design watch faces and complications soon.

Quite a few good articles on the Apple Watch published today as the presale starts tomorrow at midnight (PST).

But that’s okay. Apple knows that success isn’t measured by “first.” It’s measured by “best.” And that’s kind of Cupertino’s thing.

WatchAware

Like all the forum and comment trolls, screaming “first” gets you nothing.