I've been really curious about the Apple Watch - with such a small screen, how does that constrain and change the interaction design?
We're a few months away from seeing it in action - Apple's not yet announced the screen dimensions, nor have they released screenshots at a native resolution. But! If you go to apple.com/watch, you can snag some screenshots - and in one case (Photos), you can see the full screen lit up, showing a 5:4 ratio. That led me to this article, which guesses that the screen will be 320x400 pixels, at 332dpi (for the 42mm) and 385 dpi (for the 38mm).
With that assumption, I snagged a dozen images from Apple's site, and set out to mock them up in Sketch. (Yes, we don't yet have the typeface, so I've substituted Helvetica.)
So: download it, and give it a spin with Sketch Mirror - 332dpi is pretty close to an iPhone 4/5/6's Retina display, so you can get a feel for the size of it by previewing the artboards on your phone.
Here are some interesting bits:
- Nearly everything uses a black background - probably to save battery, and to make the screen appear larger by blending into the black bezel.
- The time is (almost) always displayed in the top-right corner of the screen.
- The status bar combines both status and navigation to save space - so it contains the back button, screen title, and the time.
- Tap targets are 44px tall on most buttons - same as iOS.
- Many apps (Settings, Mail, Passbook, Fitness) inset their content from the left and right edges of the screen by 2 pixels on each side. (I'm a bit doubtful of this, because it doesn't make sense. It seems like a waste of space - I can't imagine wasting 4 pixels on a 320-pixel-wide display. Perhaps that space is needed for different animations - or, it could just be the result of using screen grabs from the web!)
- On iOS, a grouped tableview's cells aren't separated - they're butted right up against each other. In the Apple Watch, table cells have a 10px gap between them, and each is its own rounded rectangle. Perhaps this is to afford touching, perhaps it's necessary to have a larger touch target, or perhaps it affords some clever animations or gestures as a result.
You can see in the Apple Watch video an interaction design pattern: the thing that you tap follows you to the next screen. This was our guiding interaction with Blixt: it helps with wayfinding, to explain where you came from, and where you're going. It reduces the need for nav bars, and the animations encourage the use of gestures instead of buttons for navigation.
Here are some examples of these things-follow-you transitions:
I am so excited to see this watch in action. There's lots to pick apart here!
At the closing ceremony for XOXO2013, The Andys said something like:
“We don’t know if we’ll do this again. It’s only going to be worth it if each and every one of you, goes off and creates something and tells us about it. Please.”
I felt some guilt for a good while, because I didn’t ship my little something until a good while later. Not a “you’re-failing-your family” kind of guilt, but the kind of guilt where you felt privileged to something magical, and you feel like maybe you’re wasting it a bit.
Then, June arrives, XOXO2014’s announced, and I’m fortunate enough to win the lottery, and I’m terribly excited.
The retrospectives on XOXO2013 often discussed a theme: Impostor’s Syndrome and its persistent presence in independent work.
What I felt through XOXO2014 is a different theme: Legacy.
Most of us produce digital goods and services, which are wide-reaching but fade quickly. Websites disappear, apps get updated, social networks empty out, albums fall out of rotation, and companies fall apart - what is it that’ll last from all of this?
Whether it’s the legacy of the old steel mill that held XOXO2014; whether it’s Kevin Kelly’s legacy of discovery tools; whether it’s Gina Trapani building two companies out of a fear of death and a desire to make the most of her time; whether it’s Anita Sarkeesian’s brave and powerful work; whether it’s Mann’s Bubba aging; whether it’s Justin Hall's lookingclosely-documented life; whether it’s Paul Ford trying to closely document and examine the past - there was a theme about what remains when we’re done.
A century from now, will our projects matter?
Does it last if it matters?
Does it matter if it lasts?
XOXO2014 was beautiful. It was earnest. It was a beautiful spot, crafted by the Andys and an army of volunteers, and though the murals will be painted over and the property paved for a new building, this wonderful mass of people all shared a weekend there, and that will last.
Amit Gupta has a kick-ass poster in his office - it reads: “Work Hard and Be Nice to People”. I think that sums it up. It’s about being sincere and helpful and good to those around you, while trying to make something happen. What that something is, it’s up to you.
There are folks that I met at XOXO2013, folks who are personal heroes of mine.
Then in the following year, several felt inspired to make a change in their lives after XOXO2013, to try something new. Their former gigs, ones that I would’ve *died* to assume, it turns out that they were eager to leave.
XOXO has shown me that everyone is making it up as they go along; everyone is trying their damnedest; everyone is good at something; everyone is afraid that we’ll find out that they’re bad at something else. Those who have Made It are often confused or scared - and those who haven’t Made It are, too.
What absolutely kicks ass is meeting each other, enjoying some food carts in the sun, and learning how we all tackle this stuff, with our guards down and our eyes and ears open.
Maybe this is coming across as corny, but it was certainly more profound than something I can capture here.
XOXO truly feels like a beautiful, lasting thing - and I’m so grateful to have had another chance to savor it.
For awhile now, I've been kicking around the idea of creating a new website, to write about front-end iOS development.
Today, I'm opening it up. Go check it out: devsign.co.
Whether you're a designer looking to better communicate with an engineer, or wanting to jump in and learn to write front-end code yourself - or whether you're an iOS dev who wants to learn more about design tools and methods so you can improve your eye and ability, that's what I'll be writing about.
Today, if you're a web designer, you damn well better know how to write front-end code. While it's not yet the case for iOS, I imagine that it will be someday soon, especially with the increasing importance of animation and prototyping since iOS 7.
There are some great tools (like Framer and Flinto) for creating prototypes (and I'll write about those, too!) - but your customers don't see your designs and prototypes, they see your final product, and at some point, somebody's going to have to translate the magic numbers and easing curves out of the designs and prototypes and turn them into real code.
I figure that that moment, that shift from design into development, is a place that could use a good amount of attention, no matter where you like to live in the app-creation process.
I've been quietly posting over at devisign.co for the past couple of months, I hope you enjoy it!
I came across an episode of the Vector podcast, where Rene Ritchie interviewed Don Melton on team building. It's a wonderful, timeless episode on what it takes to build a great team. (Go listen to it!)
One section resonated really deeply with me, where Don talks about what he'd look for when he interviewed candidates at Apple. It takes place about 14 minutes in to the show:
This is what I've found, and I've actually used this over the years:
Smart is greater than Knowledgeable.
Intelligence and problem-solving skills are [almost] always more valuable than specific domain knowledge... That's because domain knowledge changes over time; it gets stale - and I would rather have a whole team of generalists than just a few specialists.
You have to have people who are able to be generalists, because they can reapply what they know to new problem domains... you can be flexible like that.
Being Teachable is even better than being Smart. You have to ask yourself: can you teach them, even if they're not mart now? Can they learn quickly, and eventually become experts? Do they have headroom? Can they grow?
So, Teachable is even more important than being Smart.
There's something that's even more valuable than being "Teachable", and that's being Passionate. You have to ask - will they do it? If you have somebody that's Knowledgeable, that's Intelligent, that's Teachable - are they going to go for the long haul? Are they willing to make the effort? Because people on a mission like that are not to be trifled with - they're The Crazy Ones. Passion - it's so important - it's this little burning seed in there, you've got to have the "fire in the belly" - very, very important.
What I've found over the years that trumps all, that trumps even Passionate, has always been Trust. Are they trustworthy? It actually might be even more important than Passionate. Can I trust this person to finish the job, to complete what they said they'd do? It's absolutely the hardest thing to evaluate in a job interview, you've got like 30-45 minutes with a person, how do you do that?
(Teachability is also difficult to evaluate in an interview, but it's nowhere near as [difficult] as Trustworthiness.)
You really have to learn to peer into the soul of people to try to figure [Trustworthiness] out, but it also helps if you know some history. It really helps if you know the candidate personally, or if someone you already trust knows them and knows them to be trustworthy.
Hiring someone you Trust, by the way - it's just fabulous, because Trust is peace of mind at night, because you can actually go to bed and get a good night's sleep, because you can trust that person to come through. It's a delight.
Seriously, go listen to this episode.
I recently needed a PSD for a UIAlertView with a password field, and couldn't find a decent one - so I made my own.
I love Teehan+Lax's iOS templates. They're incredible for building out wireframes, and they're an integral part of my Photoshop workflow.
Thing is, there's a new UI app in town, Sketch, and it's pretty great. I wanted an iOS template for it, but couldn't find anything decent - so I set out to build one.
It's (nearly) entirely made from vector shapes, and I've organized the layers into groups so you can easily find and copy the ones you need for your design.
Download the Template (10.8 MB)
In an era where we're always thinking about the near-term future, it's often really helpful to use tools that help us manage our time and our perspective relative to time.Read More
Here’s a little collection of my favorite books, tutorials, and tools that helped me get started with iOS design and development. There are a bunch of books and tutorials that didn’t make the cut for this list - this is a (fairly) concise list of what I think helped me the most.
(Quick note: the website won’t let me rearrange the list, so start with the books at the bottom of the page.)
…a year ago, I lived in San Francisco. (I didn’t even know that I’d be moving.)
…a year ago, Natalia and I were still living in separate places. Now we’re engaged and live in Seattle.
…a year ago, Threadnote was a very, very rough prototype. It was ugly, full of bugs, and while Ryan and I had a vision of what it might be, I felt an uneasiness about how I’d make it work out.
…a year ago, I hadn’t even been contacted about donating my stem cells. (Whoever you are, hope you’re enjoying them!)
…a year ago, I was designing eCommerce websites for Deloitte’s clients. I hadn’t yet transferred into making iOS apps.
…a year ago, I didn’t even know Jesse.
…a year ago, I had an itch to do something more, and I’m really glad I scratched it. Day by day, it didn’t feel like much, but holy shit, looking back? My life is completely different.
Everything changed in 2012. Some of that change was scary. Some of it was dull. Some of it came out of nowhere.
Here’s to 2013.
I noticed this on New Year’s Eve this year: if you’re taking a video on the iPhone, you can simultaneously take a still photo by pressing the “-” volume button on the side of the phone.
Pressing the “+” volume button will start/stop recording video.
(There’s also an onscreen button for doing these tasks, but when it comes to using the iPhone’s camera, nothing beats using the hardware shortcuts!)
For the past few weeks, I’ve been wearing the Jawbone UP. Here are my thoughts on the band, the app, and the experience as a whole.
I’m glad the UP is a wristband, and not a clip-on object. It’s more tangible, visible, and easier to remember to wear.
The UP band has some wonderful features. It’s got an alarm to wake you up at the right moment in your sleep cycle at night or while napping. It tracks your activity and sleep habits, and even buzzes if you’ve been sitting idle too long at work. The battery life is fantastic - in my experience, it lasted the full 10 days.
The aesthetics and comfort of the band are pretty great, too. Like the Fuelband, the UP has a lot of unbendable gadgetry onboard, so to handle this constraint, it’s designed like an open loop to flex a bit - it doesn’t feel like an iron manacle on your wrist. The open-loop design also makes it easy to remove the wristband.
However, the band does have a few major drawbacks. After the second week, the plastic cap started to come loose a bit. Also, the band doesn’t give you any feedback on your activity levels: if you want to check your activity, you have to:
- Get out your iPhone,
- Unlock your iPhone,
- Find the Jawbone UP app and open it,
- Take off the UP bracelet,
- Remove the UP’s plastic cap
- Plug in the band to the iPhone
- Wait for the sync (10-20 seconds)
This was fine for a couple of days, but once the “new-shiny-gadget” vibes wore off, this became a chore. I eventually was syncing 1-2 times a day, which means no real-time data.
The Fuelband gets it right in one single action: press a button, and the band will tell you your activity level. I don’t need the UP to sync wirelessly, I just need it to have some visible progress bar on the bracelet to track my daily activity.
The whole premise of the UP is that it will give you insights into your health. You wear the band, it learns about you, and it shows you data.
The problem with the UP is that it has a bad case of Data Vomit. It gleefully spits out colorful bar charts, activity feeds, and metrics, but it buries the story.
When you’re tracking your health, you don’t care about transactions. You care about summaries, trends, and warning signs, and Jawbone’s really missed the mark here. Here’s a list of some of my grievances:
- Why is the home screen a newsfeed? Each entry is bulky and a waste of screen space. The newsfeed design prioritizes the chronology of activities, which is bad: I’d far prefer a summary view of my activity than a bulky feed.
- The app feels like it’s meant to be a social network. Each entry on my activity list includes an avatar, username, a timestamp, an ability to comment, and an indication of whether that post is public or private. I don’t want to comment on my broccoli, I just want a summary view of my day.
- I wish that, instead of tracking the number of food items I’ve eaten, the app would focus on my calorie intake and the quality of food I’m eating.
- The food summary is too “cute” and not easy enough to read. How do these numbers compare to yesterday? How much extra salt have I had today? The UP won’t show you this in a meaningful way.
- The app makes no attempt to account for your activity levels when tracking calories. If I go for a 400-calorie run, my daily calorie budget should increase by 400 calories. Instead, the UP buries your calorie intake on a second screen.
- It’s got not one, but twohamburger basements. Hamburger basements are often an indicator of lazy design; they’re used when the designer can’t decide what features an app should have, so they use offscreen navigation lists to hold a variable number of features and sections. They’ve got some major drawbacks, though: it’s difficult to switch sections, the sections are less discoverable, and in the UP’s case, if you’ve got two offscreen navigation lists, the right-hand one is dependent on the section you’re in, which is confusing and slow to move between.
Data should tell a story
A good health monitor should provide me summaries in a meaningful way. The data displayed from the UP has a few main issues:
- The UP makes it difficult to see trends across time. Weekly and monthly views should show daily averages, not weekly summaries and monthly summaries. As it is, to show me “You got 98 hours of deep sleep last month!” means absolutely nothing. When the app uses monthly/weekly totals, it means that your current week or month can’t be compared to historical data, because your current time period is in progress.
- The trends section only shows bar charts. This is a major problem: the interface doesn’t show you correlations very well, let alone negative correlations.
- The “Did you know?” tips are really useless. They tend to be platitudes with very little data in them, so it feels like the app is a Magic 8 Ball with health tips in it. Not exactly the data-driven analysis I was hoping for.
- The UP tracks your mood over time, but then it doesn’t do much interesting with it.
- The “Lifeline” feature, while somewhat interesting, doesn’t use the whole screen and uses very tiny text to display data. I wish they’d use a landscape view and a larger text size.
The app should tell a story with your data. With numbers, it should use daily averages instead of weekly sums. It should use scatterplots and best-fit lines or some other clever method to show correlations (both positive and negative). Here are a few stories that the UP doesn’t tell, but I wish it would:
- Cumulative Sleep Debt over time: how far behind am I on my sleep?
- Sleep debt and your mood: How does my sleep debt affect my reported mood?
- How does my activity level affect my mood?
- How do sleep and physical activity affect my calorie intake? My weight?
- Am I sleeping more or less on an average night this month than last month? (The app currently shows weekly and monthly totals, not averages).
What the UP could be
It’s not right to point out problems without making some suggestions, so here’s what I’m looking for in a health-tracking tool:
- A wristband that looks great, and has a good battery life.
- A tool that either has over-the-air sync or an on-device progress indicator. (Bonus points if it’s got both.)
- A tool that tracks my sleep, and wakes me up at the right moment. (The UP is great at this).
- The app needs to focus on summaries, trends, correlations, and useful recommendations. (The UP needs to ditch the “activity feed” concept - unless it’s a feed of daily summaries.) LoseIt has a killer daily and weekly summary view; I wish the UP had a similar dashboard.
- The service should tie in with other services: I love Strava for tracking biking and running, and LoseIt has the best calorie-and-weight-tracking website I’ve seen. The FitBit does this syncing nicely.
In the end, I’ll be returning my Jawbone UP. The silent alarm in the morning is wonderful, but aside from that feature, the bracelet hasn’t been worth the effort. I have spent more time and attention thinking about my activity and health, which is the whole point, but I’m holding my breath for a service that’s simpler, easier, and tells a more compelling story with my data.
My buddy Bryan Hansen’s crafted an amazing UICollectionView tutorial. If you’re getting started with this iOS 6 framework, (and you probably should be) then block out a couple hours and work through this thing.
Fake news becomes real news.
Sometimes, you watch TV on a small screen, sometimes you watch TV on a big screen. Sometimes you’re close to it, other times you’re not. Some TV watchers have 20/20 vision, others don’t.
What if TV adapted to your viewing, the same way that responsive websites adapt to differently-sized devices?
With the confluence of web-enabled televisions, streaming internet video, and a growing cultural appreciation for design, customization of electronics, and accessiblity, this might be a reasonable thing to see in the near future: a television that not only shows you *what* you want to see, but *how* you’d like to see it.Read More
Here is a Chevy stereo in 1954:
There are 7 controls. Two dials for volume and selecting a station, and five station presets. You could master this system in a few seconds. The controls are all physical, so you don’t have to take your eyes off the road to find the one you want.
Here is a Chevy stereo in 2010:
There are 24 controls, and a large screen containing menus, submenus, and settings. This is a very complex interface, and I know that there’s a lot of thought that’s gone into it, but it’s still a very, very complicated one compared to the 1954 dashboard.
Then the real bugger arrives: the auxillary (AUX) cable:
This little guy connects to your phone, and therein lies the trouble. Everyone (myself included) plugs their phone into their car stereo, and the result is terribly dangerous. You’ve now got a mini-computer that has no manual controls, so it requires that you operate it with your eyes, and it’s holding the tastiest, freshest, most dopamine-inducing experience glowing right there in your hand. A hand that should probably be at 10-and-2 on the wheel, right?
This interface, while delightful on the couch, is quite deadly on the road. We know that messaging while driving is very dangerous, but how often do you use your phone to:
- Lead a conference call
- Reply to that urgent email from your boss
- Make that perfect playlist for the rest of your car trip
- Playlist? Nah. Let’s just make a Pandora station…
- Pandora? Nah. Let’s download that awesome NPR podcast about Breaking Bad.
- …but why **listen** when you can **watch**? Let’s finish up that documentary on Netflix, yeah?
- …or better yet, go for 3 stars on that Angry Birds level?
- OMG, did you see that guy using his iPad while driving? Let’s fire up the Camera app to take a picture and tweet about it…
The interface of linking your car’s dashboard to your phone and/or manually operating its contents is really, really awful.
There are a few parts to solving this problem:
- Auto makers: Please design a car interface that is compelling enough for us to stop plugging our phones into the AUX input.
- Phone makers: Keep up the good work with those voice-input tools.
- Drivers: I know this is naggy, but can we put the phone on silent and leave them in a pocket? Maybe print up the directions before leaving the house, or burn a few CDs to listen to in the car? Bonus points if you leave your phone in your bag.
I am just as guilty as anyone of driving while distracted, but maybe that’s the real solution: get rid of the driving. If Google can hurry up and get their self-driving car on the road, maybe we can all get back to our Angry Birds.
Then we all win. (Except for those green pigs.)
We often hear the term “open” in regards to open-source software, but today I read an amazing definition that I hadn’t considered before:
If we want to define how “open” any industry is, we should start with a number: the cost of entry. By this we simply mean the monetary cost of getting into the business with a reasonable shot at reaching customers. Is it in the neighborhood of $100? $10,000? Or more like $1 billion? Whatever the magnitude, that number, most definitively, is what determines whether an industry is open or closed.
This definition of “open” strikes me as a more complete definition. If it’s all about the cost of entry, it encompasses the open-source argument, but it brings with it some added implications.
By Wu’s definition, the barriers of entry to reaching customers are what determine openness. By this definition, I’d argue that Apple’s iOS development community is more open than Android’s: the barriers to getting a good product into the hands of paying customers are far fewer. Yes, the iOS developer program costs $100, but look at what that affords you: access to a massive and growing collection of customers who are far more likely to pay you for your product, and instead of wrestling with device fragmentation, you only have to develop for two screen sizes.
Wu’s “open” has implications for other industries:
- We talk about whether our political process is transparent —-look at the high net worth of our politicians, and it’s clear that there are financial requirements for getting your voice heard in this country.
- We talk about the importance of education in our society, but when tuition prices skyrocket, our society becomes less of a free and open community. If you graduate and are burdened by debt, you are less likely to pursue your dreams, and more likely to work for the highest (or only) bidder.
- The recent battles over patents show that if the cost of defending yourself is too high, then the patent system truly isn’t open to small innovators.
- Sometimes, we want communities to be closed. Doctors, for example, should have to struggle to become doctors, or else we couldn’t be sure of the quality of their work. (I personally think that medical school should be inexpensive yet challenging, but let’s save that for another post.)
- The declining costs of getting your message out to the world is what’s driving the free and open exchange of ideas on blogging platforms like Wordpress, Tumblr, Twitter, and Facebook. Folks who used to read the newspaper can now participate in the discussion, and the old media empires can’t keep up with this new, open world.
PS: This book has been incredible so far. I found it through Seth Godin, and it is full of annotations on my Kindle. So good!