Geoff Teehan – Teehan+Lax /blog We define and design custom experiences in the digital channel Tue, 13 Jan 2015 19:25:18 +0000 en-US hourly 1 https://wordpress.org/?v=4.8.1 Affordances matter /blog/affordances-matter/ /blog/affordances-matter/#respond Wed, 16 Apr 2014 16:02:13 +0000 /blog/?p=11624

This isn’t news, but the shift key in iOS 7 is broken. That is to say, it is functional, it just doesn’t work. Most of the people who will read this have thought it, read about it, or wrote about it themselves.

The problem comes down to one simple problem: Visual affordance. It needs to be clear what something does, and when it’s doing it. I won’t go into to detail about visual affordances—A simple Google search will show that people, a heck of a lot smarter than me, have written about this in great detail.

Apple’s iOS 7 keyboard gets the first part right, but it completely fails at the second. It’s clear where the shift key is, but it isn’t clear when the shift key is active. In other words, there is an affordance, it’s just not strong enough.

A simple fix

Android deals with this by making the characters on the keyboard change case, when the shift key is active. Simple, and I love it.

Current iOS 7 Keyboard


Can you tell when it is active? The only affordance given here, is a that the colors change to match the those of the letter keys. The two-pixel drop shadow remains the same, as does every other element on the screen. There are certain scenarios that automatically enable the shift key (beginning of sentence). If you make a mistake and go back it gets unclear in a hurry whether or not it’s active. This breaks down further when typing the proper name of something that requires a cap, mid-sentence. Again, if you make a typo, or need to correct something, you find yourself in a recursive loop of pressing the shift key, followed by the letter you require to see what case it is in. You could literally stare at the shift key for ten seconds or more and have no idea if it is active or not.

Alternative iOS 7 Keyboard


Here’s what an Android-style shift affordance would look like. There is also a subtle change in the design of the active shift key to add a secondary affordance.

This isn’t the perfect solution, but it does solve the problem, and, it makes the point that affordances matter. I’m not entirely sure how I’d feel about having the characters change all the time—I do find it a bit jarring on Android. I also do appreciate the uniformity of the all-caps by default in iOS 7. I’d be curious to know how Android users feel about the constant shift (no pun intended) in character case.

]]> /blog/affordances-matter/feed/ 0 The State of In-Car UX /blog/the-state-of-in-car-ux/ /blog/the-state-of-in-car-ux/#respond Wed, 09 Apr 2014 14:43:11 +0000 /blog/?p=11570
We are surrounded by bad design. You witness it when you’re taking cash out of an ATM. You experience it when getting your boarding pass from the airport kiosk. You feel it when setting the clock on your stove. Simply put, bad design is everywhere—especially inside your vehicle.

With so many industries placing more value on design, specifically interface design, why does the automotive industry seem to have it all so wrong?

I’ve always had a fascination with cars. As I became more involved in design, my interest in them grew to include the interfaces and information that adorn their consoles and dashboards. In the ’80s and early ’90s, these interfaces were primarily made up of small screens and analogue buttons. Back then, you could swap out your factory stereo for something better. Teenagers primarily did this so they could include better/more amplifiers and better/more speakers—usually to make it loud and full of bass. This would result in the ability to impress friends, annoy parents, and disturb those around you in traffic.


An aftermarket replacement like the Alpine 7903 relied on hard buttons and 7-segments for its UI. The interface on these systems was relatively simple. They relied on hard buttons to control a small feature set (read: the stereo). They would then have an entirely different area of the console that used another set of switches, buttons, and sliders to deal with things like climate control.


The 1995 Nissan Pathfinder shown above with an aftermarket stereo and its separate controls for climate control.

One of the main reasons these systems have gotten worse is that they no longer just deal with the controls on your stereo—they deal with everything. It’s common for the UI in today’s consoles to include inputs for complex stereos, multi-zone climate control systems, navigation, vehicle information centers, phones, contact lists, and a host of other things. The number of operations has risen from a couple of dozen to a few hundred. For example, the Porsche 918 Spyder’s center console controls more than 800 functions. These interfaces simply aren’t efficiently dealing with the number of requirements they have. This is a big part of why things are they way they are, but still, I think it’s only part of the problem.

Beyond the vast number of functions these systems are supporting, there are regulatory and testing requirements, which, I’m sure, need involvement and approval from multiple groups, partners, and organizations that live outside the manufacturer. These factors add more constraints, roadblocks, and bureaucracy that need to be taken into account. It wouldn’t surprise me if these checks and balances literally added years to the ‘design’ process. In other words, some of what was designed into your 2015 vehicle started back in 2013.

Cost is another important factor. It’s expensive and time consuming to produce these systems. Manufacturers are incentivized to create things that can be adapted and adopted for use across a model range, or in some cases, across multiple brands. They want to keep those costs down and have speed to market.

Some of what is being produced is inexcusable for any company, regardless of the constraints put in front of them. There is no excuse for a system to use type that’s unreadable. There is no defence for an interface that uses obtuse iconography. You can’t rationalize a palette with poor contrast or bevelled buttons lifted from Windows 95. Bad design is sometimes just bad design—and it’s all too common in automotive interfaces.

The clarity, simplicity, and aesthetic of these systems should be more important to manufacturers. They should see it as a major opportunity to bring moments of joy and delight to customers. These are systems that allow us to physically interact with their brand. These should not be ugly exercises of frustration. They should exude the brand with every interaction. When I get in a Ferrari California and I turn on the stereo, or adjust the climate control, it should feel like Ferrari. It shouldn’t be the same experience I get when I turn on the stereo in my Chrysler Town & Country minivan. In case you’re wondering, that’s a real example. Can you imagine if those two cars shared another part, like the headlights or door panels? It would never happen. How on earth was this acceptable to them?

In December of 2013, I kicked off a tirade about this on Twitter, which was initially fueled by an interior photo of the Porsche’s new 918 Spyder. At $845,000, it represents the absolute best that Stuttgart can offer. Surely they designed an amazing interface that connects the driver with that impeccably engineered vehicle, right?

Nope.

One look at the photo and there’s a half-dozen design choices I would question. Some were just design inconsistencies, like why the fonts on the touchscreen differed from those in the input selector. Perhaps there’s a reason, but I’d guess the people who designed those two things didn’t work together. What about the color of a selected item? Why use green on the touch screen and orange below?

Others things seemed like more fundamental flaws in the UX and had to do with the hardware and software. For example, look at the top portion of the image below. I assume, based on the three little dashes above the station grid, that I’m looking at the second of three screens of FM presets on a touch interface. I’d bet $845,000 (I wouldn’t) that the screen doesn’t support a swipe gesture that allows you to navigate across the three screens. Instead, you’ll likely need to tap (or swipe?) the left and right arrows centered above the screen. That doesn’t actually make for a broken interface, but it doesn’t make for a good experience either.

Porsche 918 Spyder ($845,000)


A month later, I stumbled across another image of the Porsche’s interior that illustrated the angle at which this console screen is positioned. I wonder what that actually looks like from the driver’s perspective during daylight.

The shallow viewing angle of the console in the Porsche 918 can be seen in this video at around 2:00.
This got me wondering what the UI systems in other ultra-premium cars looked like. It only took a few quick searches to realize that Porsche’s hypercar was far from the only offender—and it was far from the worst. It didn’t matter who the manufacturer was, or how much the vehicles cost—all of the interfaces sucked.

Despite the growth and maturity of the design industry, I firmly believe that most automotive interfaces have actually gotten worse in recent years. Much of what I’ve found in my ‘research’ isn’t being designed with the driver (or passengers) in mind. Take the dash of the new Audi TT as an example. What is the purpose of that 3D radial menu surrounding an image of the car you’re driving attempting to communicate or solve?

Audi’s new digital dash

It features a 3D model of the car you’re driving and a radial menu of options.

This execution probably wouldn’t have been feasible three or four years ago—an important point, as I think some designers get caught up in doing stuff because new technology allows them to. They don’t stop and ask why they’re doing it.

It’s hard to argue that the touchscreen isn’t a brilliant piece of technology. In just a few short years, it’s changed the way we design and interact with an ever expanding number of devices. How about in our vehicles? To date, I’d say not so much. Software aside, many systems are using sub-par hardware. There are a lot of systems out there that only support a simple tap. Very few support gestures or multi-touch—important factors when you think about a designing a map interface. Then there’s performance. So many of these systems are underpowered and result in slow response times. If putting in proper hardware makes the solution too expensive, then slower hardware isn’t a solution at all.

Twitter rant

I do see a few glimmers of hope, however. Before I get into that, it’s worth sharing some of what started all this. Here are the highlights from my Twitter rant:

Ferrari & Chrysler

California & Chrysler Town & Country Minivan ($200,000 and $30,765 respectively)

McLaren 12c ($250,000)


This is seems to be an update version of the Mclaren UI (orange blocks are my emphasis). They illustrate the inconsistent columns and gutters.

Rolls Royce Phantom ($450,000)

Tesla Model S ($65,000)

Lexus Concept

Lexus LF Concept Car

Pagani Huayra ($1,100,000)

Bugatti Veyron ($2,500,000)

The new F-type Jag ($80,000)

The car is gorgeous but the UI has almost no visual hierarchy in this screen.

Mercedes Benz S-Class ($140,000)

You don’t need to speak German to know the AC is on full blast in your S Class! That mad illustration says it all.

Lamborghini Reventon ($1,500,00)

I’ll give it this: It feels like the car.

Corvette Stingray ($62,000)

More icons styles than horsepower.

Lotus Evora ($80,000)

Squares, circles, multiple gradient styles. The gridless design is the least of its issues.

The Range Rover Sport ($75,000)

This leaves me a tad speechless.

Lexus GS450h ($60,000)

Lexus LFA ($350,000)

2015 Audi TT

The 2015 TT has Nest-like controls on the vents. This seems like a very smart idea that gets away from these huge touchscreens that try and do everything.

Apple & Google

With a billion cars on the planet, the in-car experience is a big enough problem space that companies like Apple and Google have decided to get involved. They’ve begun working with manufactures on their own systems that will integrate into vehicles. Other players like QNX, Windows CE and Linux have been present in cars for awhile. They too are working on better in-car experiences, but they have a history of incremental improvements and, at this point, are probably dealing with legacy problems.

Apple and Google are new entrants in this space. These are companies that create the great devices we use most, so I’m optimistic that they’ll be able to deliver significant improvement over what exists today. A lot of the functions people actually want to use while in their car aren’t part of the car at all—they’re part of your phone. While most manufacturers allow you to connect your phone to your car, the systems are stripped-back versions that are far from seamless. Your music, contacts, messages, and even some of your apps like Google Maps or Waze are either terrible experiences or unavailable. As a result, people just end up using their phones while driving. Better integration will be safer and is likely to reduce accidents and save lives.

It’s shaping up like a battle for the in-car experience between Apple’s CarPlay and Google’s Open Automotive Alliance (OAA). Manufacturers are choosing their respective camps. Ferrari, Honda, Hyundai, Mercedes, and Volvo are the first brands to choose Apple’s CarPlay. There are 13 others that have committed for future models. Google, on the other hand, has announced that they’ll initially be working with Audi, GM, Honda, and Hyundai.

So what’s to make of GM, Honda, and Hyundai? These companies are signed on to both platforms. Though there’s no answer yet, I wouldn’t hold my breath about both systems being supported simultaneously in the same vehicle. A customer may have to choose which option he or she wants at time of new purchase.

Google and Apple are attacking this problem in very different ways. With CarPlay, you plug in your iPhone 5 and control the interface with Siri or whatever inputs the car supports, e.g. touchscreens and native interfaces like hard buttons, dials, joysticks, and steering wheel inputs. This video shows how it works in a new Mercedes Benz.

CarPlay Music app


This UI still looks a bit rough on CarPlay. The information seems pretty tight and dense. Then there’s the mystery of the two ‘home’ buttons. Looking at the CarPlay simulator didn’t really tell me much more about them, but it did reveal and confirm something else. When you connect your phone to these systems, the phone itself can’t be used. In other words, for obvious safety reasons, you’re forced to use the screens and inputs in your car.

Google’s approach is a bit more of a mystery, but they appear to be taking a different approach than Apple. The Verge reports that they’ll be tackling their solution to in-car UX in two ways. The first approach will be Android-powered cars. The second, is that they’ll be enhancing Android phones to make them more car-friendly.

There’s certainly some hope on the horizon with Apple and Google, though just how good these systems will be remains to be seen. One thing is clear, though: the current state of all in-car experiences is incredibly bad. For those manufacturers looking to go it alone, I don’t expect much.

]]> /blog/the-state-of-in-car-ux/feed/ 0 iOS 7 GUI templates will ship inside of Sketch 3 /blog/ios-7-gui-templates-will-ship-inside-of-sketch-3/ /blog/ios-7-gui-templates-will-ship-inside-of-sketch-3/#respond Mon, 31 Mar 2014 18:36:10 +0000 /blog/?p=11543

I’m really excited today to share the news that our iOS 7 GUI template is going to ship natively in Sketch 3 (Sketch 2 shown above). No longer will you need to Google ‘iOS GUI Sketch’ and download the file from our site. You can just open Sketch 3, select our iOS 7 template and starting building out your next iOS app.

When Pieter Omvlee, the founder of Bohemian Coding, reached out asking if we would consider having it as part of the new release we were hesitant at first. For as long as we’ve offered the PSD we’ve been asked by other software developers to include versions of it in their software. We have said no to every one. So why are we saying yes to Bohemian Coding?

Growth in popularity

In recent years, I’ve seen a good deal of designers make the switch to Sketch. Khoi Vinh is one such designer. He recently wrote a post about his thoughts on the forthcoming version. He sums up what he likes about Sketch by saying:

(Sketch) combined the precision of a raster editing application like Photoshop with the versatility of a vector editing application like Illustrator, and it did so with all of the speed and nimbleness of a newly imagined, freshly written app, one free of the cruft that had been increasingly weighing down the dominant players in the graphics software market for years. Also, it was incredibly affordable.

More and more companies we work with have switched to using Sketch in their workflow, including Flipboard and Medium. One thing I’ve noticed about the people who use Sketch is that are all incredibly passionate and vocal about the making the switch. Cemre Güngör, design lead at Branch and now Facebook, made the switch awhile ago and cites this as one of the main reasons he made it:

Sketch’s rendering feels closest to the end result (fonts, etc). Photoshop’s output feels like an estimation.

I’ve heard some complaints about its stability, or that it just doesn’t do some things as well as Photoshop, but a recent tweet of mine asking who was using it elicited a ton of ‘yes’ replies from some very notable designs and companies. It’s clear, even from this, that a lot of people either look past any issues its current version has, or, use Sketch to compliment their workflow.

Learning a new trick takes time

It’s really hard to make a switch like this. After working with Photoshop and Illustrator for well over a decade, it can be incredibly frustrating to move slowly through something as simple as adding a mask element, purely because you haven’t done it before. It’s always difficult to learn new things, not because they are difficult, but because they are slow. Time isn’t always something you have a ton of when you’re cranking on that next product feature. Most of us here at Teehan+Lax are still using Photoshop, but we’ll all be putting Sketch 3 through its paces once publicly released. It’s important to us here that we take the time to assess and learn new things, even if they never become part of a final workflow.

Ultimately we believe that Sketch has a very bright future and we want to be part of shaping that future.

One big shout out is needed for our friend, Tyler Howarth. Tyler was actually responsible for porting over our PSD version of the file to Sketch. Thanks, Tyler.

We will of course still be supporting PhotoShop and continue to host all the versions of those files on our site.

If you’re interested in being notified when Sketch 3 becomes available, you can sign up here.

]]> /blog/ios-7-gui-templates-will-ship-inside-of-sketch-3/feed/ 0 Prismatic for iOS & Why designing content systems is hard /blog/prismatic-for-ios-why-designing-content-systems-is-hard/ /blog/prismatic-for-ios-why-designing-content-systems-is-hard/#respond Thu, 19 Dec 2013 16:57:35 +0000 /blog/?p=11218

Earlier this year, we partnered with a startup in San Francisco called Prismatic. We were asked to help them redesign their product. We got up to speed and worked alongside their designers and engineers refining some of the Web application before moving onto iOS. Today, some of that work came to fruition in the form of their newly launched iOS app. We plan on writing a full case study on our site in the new year, but I wanted to share some of the background, challenges and work we did in the meantime.

Some background

Prismatic started out back in 2011 as a really smart personalized newsreader for the Web and iOS. I became a pretty active user right from the beginning. It just seemed to implicitly know what I was interested in. Aside from being a good destination to kill time or dig deep on an interest, it was a good place for me to find stuff I could share with my personal network. Like many new products, it wasn’t without its faults. The article parsing, while clean and awesome when it worked, would sometimes fail. The typography was pretty rough in the early days, and the UI was trying to do too much on the Web—all at the expense of the content. Despite its shortcomings, I still found myself using it often.

Summer of 2012

I was in San Francisco working on another project when a coworker suggested we meet up for a drink with one of the founders of Prismatic, Bradford Cross. A couple beers later, he asked me what I thought of his product. I gave him a pretty honest personal assessment. I was impressed by how it would show me things I was interested in, like architecture, cars or food, even though 95% of what I follow and talk about is related to design—it felt a bit magical. I went on to tell him that I disliked the Web experience. That the interface was trying to do too much at the expense of the content. I believe at one point I may have said, “The headlines are taking a shit-kicking”. The iPhone app was better, but far from perfect too. I kind of just put up with everything about the apps because I was finding great content with very little friction. I’d later learn that Bradford is the type of guy who appreciates this type of honesty.

After talking about some of those details, he enlightened me on a much more ambitious goal they had beyond that of any typeface or UI system: They wanted to become the home for my full spectrum of interests. That’s a pretty ambitious goal, that they’d only begun to develop. Done properly, it struck me to be on the scale of that of Facebook or Google. What impressed me at the time wasn’t that they were thinking that big, but that they seemed to have the smarts to execute on it. Bradford expanded on what he meant by saying:

Current social networks box you in. If you’re into tech, but also into cooking and hiking, it’s hard to follow enough cooking and hiking people, and your followers are probably expecting tech from you, so there’s social pressure to avoid sharing about cooking and hiking. We want Prismatic to be way more scalable and elegantly solve for that. We want it to be the social network for interests.

You can follow all your non-tech hobbies and passions you don’t talk about on Facebook and Twitter, without needing to manage crazy groups or project a single persona. We can do it by ranking everything based on you and your network, so you always see the most interesting things at the top.

It immediately made sense to me. I’m into design. As a result, who and what I follow on Twitter, and who tends to follow me back, are also interested in design. While design might be my main interest, it’s not the only thing that I’m interested in. Most of the time, I end up not sharing content like how ‘Porsche’s 918 gets better gas mileage than a Prius’ or ‘the ugliest house in America’ because it would be considered off topic for the majority of my network. In most social networks, the primary interest of who you follow is directly related to the type of content you’ll get from them. I liked that Prismatic was thinking very differently about this.

Bradford and his team recognized this wasn’t something they’d fully solve in an iteration or two. This was incredibly complex work—both to think through, and to execute. It was, and is going to continue to take, a lot of smart people, time, explorations, research and iteration. We wanted to help.

Product design is hard…

Identifying and extracting content from a gazillion different places is hard. Their job here is to crawl and index all the interesting content on the web—social, mobile, commerce, media etc. In fact, at the time of this post, their system looks at 5 million new stories every day that contain over 10,000 interests. Hard machine learning then needs to identify and extract content and interest classifications. They need to understand what each piece of content is about and what genre it belongs to. They also look at personalized ranking based on the historical interactions of you and your network. When you layer in things like scaling and performance, you beginning to understand the complexities they’re dealing with.

…really hard

In addition to the technical challenges, these kinds of systems are awfully difficult to design for too. Mikael, Nate, Francisco and Gina, a few of Prismatic’s designers, know this all too well. One of the biggest challenges here is that the ‘stuff’ you’re dealing with approaches infinity in terms of variability. Think about it—You need to design a system that works for every piece of content ever written in the past, but also has the flexibility to work with content that has yet to be written. At the same time you need to balance things like interactions, commenting, what’s inside the system, what’s outside the system. In the truest sense of the word, it’s awesome. With any hope, you at least gain a new respect for the people behind those massive systems so many designers love to hate on.

Content variables are plentiful, here are just a few:

  • Media type articles, videos, audio
  • Topics it belongs to
  • Associated media
  • Descriptions or summary abstracts
  • The body of content
  • Content source
  • Your connection to the content (people, interests etc.)
  • Actions taken (likes, comments, faves etc.)

Other factors like the length of headlines and the contrast of images and other media can play havoc with making everything work harmoniously. You constantly need to ask yourself: Does the content stand out enough? Are the right actions available at the right time? Are they obvious? Are the distinct pieces of content tied closely enough together to look like a continuous feed, but separate enough to look like distinct? Can I scan it? Can I read it? Is the design ownable? Is it too generic? Does the design detract from the content? Does the design get in the way of the experience , or enhance it?

As a result we worked with their team of talented designers and engineers for months on this. As I was writing this, I began looking back at the archives of files—something I rarely do until we create deep case studies. It’s mind boggling how many options, directions and iterations we explored.

The big takeaway

In the end, a successful project is never done. It is never perfect. If you aren’t learning from it, then you’ve given up. It’s a constant process of assessing the landscape, making hard choices and accepting trade-offs. It takes passion, dedication, design, engineering, planning, talent, time, iteration, research, occasional moments of blind faith and a dozen other things I’ve forgotten to mention. If you’re lucky enough to have all those things, you need only rely on perseverance, though a dash of patience and funding doesn’t hurt. Today is an enormous step forward for them and their product. It represents these things and whole lot more to me personally.

What we love about working with people like Prismatic, is that they inherently understand all of these things. The product is, in my obviously biased opinion, a great example of very progressive iteration. It represents good change and a big step in the right direction.

On behalf of everyone here, I want to wish the fine people at Prismatic all the best with this chapter of their product and the future ones they are about to write. I thank them for trusting us in part with their livelihood. We had an amazing time working with you on it, and we can’t wait to see what the future holds.

Go grab the iOS app. It’s only the beginning, and it’s going to be awesome. You can check out Prismatic on the Web too.

]]> /blog/prismatic-for-ios-why-designing-content-systems-is-hard/feed/ 0 Welcome to the new teehanlax.com /blog/welcome-to-the-new-teehanlax-com/ Thu, 14 Mar 2013 15:17:06 +0000 /?post_type=blog&p=9198

I had to go back and look to be sure, but this is now the 7th iteration of teehanlax.com. It’s by far the biggest departure we’ve taken and quite a bit different from a traditional design agency site.

It’s different for a reason

We don’t list out our services. You won’t find a portfolio section. When we talk about our work, it’s done as long-form story-telling. We call them Stories of Making. They’re quite long, but give them a chance because we didn’t write them to read like case studies. We don’t list cringe-worthy “results”—We talk about what we learned in the hopes you can learn something too. They’re open and honest. They reveal failures, not just successes.

Written for you, our peers

Most agency sites are written for clients or potential clients. It seems inevitable when you write for this audience, you end up looking and sounding like everyone else out there. We’ve decided to focus on a different audience, you, our peers. We’re good at speaking to you and with you. We know what you want because, well, you are us. So going forward everything we will be doing on teehanlax.com is designed for people who like making stuff, just like us.

Our peers are our clients

While this may seem counterintuitive to focus our site at other creative professionals, we think potential clients will understand who we are, what we do and how we work far better through this site, than any site we’ve put out before.

Over the past 2 years we’ve found that more and more of the people we partner with are our peers. Our peers are responsible for hiring companies like us, not just CMOs and IT departments.

We have a ton more to share about the new site, but it’ll be far better experienced in a forthcoming making of story than it will be in this blog post. In addition to new stories we’ll be posting up new tools that help you do your job. We also have some old sections (like this blog) that will be getting an overhaul.

We hope you like it.


]]> Latest Additions at Teehan+Lax /blog/latest-additions-at-teehanlax/ /blog/latest-additions-at-teehanlax/#comments Mon, 25 Feb 2013 22:15:19 +0000 /?post_type=blog&p=9184

I’m very pleased to formally announce two new additions to our crew today. The first is Ash Furrow, an outstanding iOS developer. Also joining us (again) is Kate Bowen, who did a good stint here a couple years back.

Seeing as Kate is a copywriter, I asked her to write a little something about Ash and herself to put here on our blog:

– – –

We are excited to welcome Ash Furrow, a new member to the Teehan+Lax family, and considerably more excited to welcome returning member, Kate Bowen.

Ash moved to Toronto from New Brunswick to work as an iOS developer and lead the iOS team at 500 Pixels for a year and a half, shipping their iPhone and iPad apps. After working closely with (but mostly just watching) the designers, Ash became more involved in design and photography. He also began a podcast on software design with two others… It was alright.

Kate grew up in our hometown of Toronto—we love that about her. She first joined Teehan+Lax back in 2007, where she called it a home for just shy of four years. These years are often referred to as the golden era of T+L. After flying the coop two years ago to explore working with different mediums like print and radio, many tears were shed (by us). Kate pretty much helped us to grow into the company we are today, so it’s nice to have her back.

Ash co-authored a book on Objective-C development (whatever that is) and has just finished another on collection views, a new technology in iOS. Kate single-authored enough short-stories to make up a beautiful, emotionally moving and intricate book that someone will probably adapt into a screenplay one day.

– – –

We’re looking forward to great things from them–even Kate.
;)

]]> /blog/latest-additions-at-teehanlax/feed/ 2 iOS 6 GUI PSD (iPhone 5) /blog/ios-6-gui-psd-iphone-5/ /blog/ios-6-gui-psd-iphone-5/#comments Fri, 12 Oct 2012 15:53:34 +0000 /?post_type=blog&p=8770

Of all the iOS GUI Photoshop documents we’ve created over the past 4 or 5 years the one for the iPhone is by far the most popular. We take these things pretty seriously because we use them on a daily basis ourselves.

This version, iOS 6 for iPhone 5, is a bit different than previous versions. Those of you who have downloaded and used these files have probably noticed they’ve become quite bloated. As fast as our computers are today, they still get pretty sluggish when working in a document that contains tens of millions of pixels with hundreds of shape layers. This time around we focussed on making the file a bit more usable. It’s smaller in file size and has a reduced canvas making it quite a bit more manageable. We did this by removing some of the more obtuse elements. If you think we’ve missed something common, let us know in the comments, or on Twitter.

We get asked a lot why it’s free. The answer is simple, and is best articulated in a post Jon wrote on our tenth anniversary. In it, he lists out 10 things we’ve learned. Number six is the reason why this is free: Create more value than you capture.

We hope you like it. We hope you conceive, design, pitch and build really great software that we’ll come to use on a daily basis as well.

Download PSD (iPhone 5)

You can follow Geoff and Teehan+Lax on Twitter.

]]> /blog/ios-6-gui-psd-iphone-5/feed/ 26 iPad GUI PSD (Retina Display) /blog/ipad-gui-psd-retina-display/ /blog/ipad-gui-psd-retina-display/#comments Thu, 12 Apr 2012 18:17:38 +0000 /?post_type=blog&p=8280

In 2008 we released our first iOS PSD. We continue to do it, not only because we find useful, but because we think a lot of other designers do too. In fact, over the past four years they’ve been downloaded millions of times. It’s become our little thank you to an industry that has given us so much. We’re really proud to be releasing our latest version today. It’s based on iOS 5.1 and includes hundreds of retina assets available natively on the platform. In addition to the GUI assets, you’ll find perfectly scaled ‘New’ iPads to help you create the apps we’ll come to love in the future.

This time around we executed the file in Adobe’s latest release, Photoshop CS6 (currently still in beta). It’s a free download right now and, in my humble opinion, one of the best releases of Photoshop to date. Its perfect pixel snapping, grouped layer styles and a few other features enabled us to create the assets with more accuracy, yet remain remarkably editable. We highly recommend it, not just so you can use this file, but so that you support great software releases like this.

Below are some screens of what you can expect. Or, if you prefer to start making epic shit right away, you can download it now.

Download PSD (Retina display)

You can follow Geoff and Teehan+Lax on Twitter.

]]> /blog/ipad-gui-psd-retina-display/feed/ 35 Readability for iOS /blog/readability-for-ios/ /blog/readability-for-ios/#comments Thu, 01 Mar 2012 15:28:51 +0000 /?post_type=blog&p=8023

A few months back we talked about our partnership with Readability. Today, we’re pleased to announce that the native apps are available on iOS.

Get it for iOS (iPhone/iPod & iPad)

About Readability
Readability is a free service that turns any web page into a clean view for reading now or later on your computer, smartphone, or tablet. If you’re new to the service you can sign up on the Readability site, or you can register inside of the app. Saving articles for later is done through browser plug-ins or from within an ever-growing list of third-party apps.

A Platform for Reading
The vision of Readability is to create a platform for reading. We want to empower developers to create better reading experiences into their products using Readability. A growing list of developers and apps use Readability today.
Tweetbot, Reeder, Pulse and Longform.

Rich Ziade, the founder of Readability says it best:

“We’re pretty convinced that the notion of providing comfort and flexibility has barely been touched today. While we’re incredibly proud of the app, we’re most proud of the development community and apps built atop the platform. The idea of building a community around a platform is what drives us. From a reader perspective, this allows us to embed your reading list in a lot of different places, devices and platforms.”

The native Readability app is built on top of this platform.

The Native Apps
We began working on the design of the native Readability apps last summer. Over that time period we constantly refined the experience down to its core elements. With each iteration, we found ourselves removing more and more – sometimes interface elements, other times features. This constant simplification allowed us to stay focussed on the primary task for users: Reading.

You’ll notice there are very few elements like buttons when you’re using the app. The content is the interface. We wanted the interface elements that help you manage or share the articles you’re reading to only appear when needed. A simple tap on an article will bring up an actions bar where you can share, archive or customize the article.

Pulling up or down at the end or beginning of an article lets you quickly get to the previous or next article. We used swipe gestures to let you go back to your reading list. This approach to the user interface removed the visual noise and distraction so you can read in peace.

Typography
One thing we knew going in was that the app would need to have beautiful typography. Most fonts on the market render poorly on lower density displays – they’re simply not optimized for them. We needed to source fonts that were designed specifically for screens in order to provide a pleasant reading experience. This is where Hoefler & Frere-Jones came in. H&FJ’s experience designing typefaces for demanding environments made them a natural choice for Readability’s mobile apps.

Offline Reading
This is a big deal for travellers and commuters. If you’re going to be offline and want to catch up on some reading just sync the application before you head out and you’ll have everything you’ve saved stored locally on your device.

Customization
While we love the defaults, we also appreciate that some people like larger fonts or styles. The app allows you to control the font family, size and on iPad, the column width. There’s even a night mode for times when you’re reading in the dark.

Go get it
We’re sure you’ve got better things to read than this. Get the app, and enjoy reading again.

Get it for iOS (iPhone/iPod & iPad)

Follow Teehan+Lax, Readability and Geoff on Twitter.

]]> /blog/readability-for-ios/feed/ 9 Going down the right Path /blog/going-down-the-right-path/ /blog/going-down-the-right-path/#comments Wed, 30 Nov 2011 19:27:31 +0000 /?post_type=blog&p=7768

We don’t often write about products that we didn’t work on, but I came across Path last night and felt it was worth talking about. Path has been around since November of last year. I only vaguely remember looking at it when it first launched, and I don’t even recall what it did – obviously a problem.

The new version, Path 2, is about capturing and sharing moments – they refer to it as a smart journal. It’s not Twitter, Foursquare, Instagram or Facebook (though it does feel like the timeline). It’s a bit more like Evernote in terms of what it does, but is more about what’s going on in your life. What struck me about this app though, and made me want to write about it, was the interaction design.

Native vs Custom

Until recently, I’ve felt most apps fall into one of two camps. They either use core elements of an OS or they’re comprised primarily of custom UI. Neither one of these approaches is wrong, though some argue that breaking conventions is a no-no. I typically argue that it’s okay to diverge from conventions so long as the experience is intuitive and polished. If it improves things, even better. Experiences that start with an overlay teaching people how to use the interface obviously miss the mark. Thankfully, we’re beginning to see UI designers start to find some balance in between these approaches – Path is an excellent example. It feels familiar, but they’ve made some smart decisions that break away from the norm without wandering off into obtuse interactions or under/over-designed visuals. The decisions they’ve made not only make things better, they add personalty and delight – something that is crucial, and often overlooked when designing something functional. There are a number of things I love about the work the team at Path have done but I want to point out a few on iOS.

First impressions matter: first-run & on-boarding

Signing up for a service is typically a painful, or at least, mundane experience. It’s a few fields, some buttons and some useless directional copy. It works though. With the exception of a system error, no one struggles with these experiences. As designers, our tendency is to focus in on the meaty parts of a project and innovate. Something as trivial as a signup flow is considered a commodity and typically little to no effort goes into them. Path chose to improve it. The first-run simply lets you understand the value by looking at a canned ‘Path’. From there, you either create an account or use an existing one. No fields, no useless directional copy, just a few intuitive interactions. I love that form elements and actions are suppressed until I’ve chosen what I want to start with. This non-linear approach is refreshing. Once registered, the app also does a good job of connecting you with other people on Path (albeit without Twitter integration, though I’m told it’s coming soon). The number of screens below make make this appear like a long, drawn out process, but in reality you never notice it.


Best part about this: I don’t have to type in my email or phone number, just pick the appropriate info that’s pulled from my address book.

Navigation: Learned and explicit

There are two things that are noteworthy here. One is how you access the menu. There is an explicit button that slides the current view to the right revealing the menu below (the Facebook app does this too). Additionally, Friends are accessed through a button on the right. What’s nice about this is that there’s what I call UI hinting going here. By animating the panels left and right I’m given a hint that I can likely swipe them to execute the same action. Relying solely on swipe isn’t quite learnable enough, and obviously we don’t want a UI instruction sheet. But only using buttons isn’t the right choice either since a gesture requires far less accuracy and is therefor a more efficient means of performing the same action.


Best part about this: This isn’t a simple swipe then animate action. It’s a pan gesture. There is an enormous difference between these two methods. The former, makes things feel sluggish and disconnected, while the latter feels physical and natural.

Prioritization: Information when needed

One of the things that I love about small screen mobile design is that the physical size constraints force us to make hard decisions. What matters most in a given context is something that I’d love to see designers ask themselves more when working with larger displays. Striking a balance between what navigation and content I need to see at any given moment is what Path does right. The ‘post new’ button suppresses the options into a delightful radial fly-out menu – I’m not inundated with options by default. The best example though, is how they’ve prioritized the content. Because a Path is timeline-based, the common tendency for most designers would be to have a time stamp in some elegant, faint grey text – just visible enough, but not to loud as to cause a distraction. What Path decided to do, and I agree, is to focus on the content of the post and de-prioritize the timestamp by making it appear when you begin scrolling the timeline. This removes clutter from the screen but allows you to see the information when needed.


Best part about this: That Path realized the timestamp isn’t all that important by default. It is after all, a timeline, so you already understand some element of time without the stamp – i.e. the stuff at the top is recent.

Congratulations to the team at Path for re-inventing themselves. It’s an incredibly thoughtful interface and very interesting product – you should try it if you haven’t already.

Most of you likely know that Color is also reinventing themselves. I hope they read this and recognize that they too need a transformation like this. This is the level of care and polish that will become the standard for everyone – startups and established businesses.

You can follow me on on Twitter @gt and us @teehanlax.

]]> /blog/going-down-the-right-path/feed/ 19