Category Archives: User Interface

New Photoshop shortcuts for layer visibility, locking

Having an excessive interest in keyboard shortcuts (I once wrote an edition of a book dedicate to this subject), I’m delighted to see some welcome tweaks arriving in Photoshop CC. According to Julieanne Kost’s blog:

  • Cmd-comma hides/shows the currently selected layer(s)
  • Cmd-opt-comma shows all layers
  • Cmd-slash locks/unlocks the currently selected layer(s)
  • Cmd-opt-slash unlocks all layers

(On Windows substitute Ctrl-Alt for Cmd-Opt) [Via Jeff Tranberry]

FingerSense expands a device’s touch vocabulary

If “Double knuckle knock” becomes more than, I dunno, presumably some gross phrase you’d find on Urban Dictionary, you may thank the folks at Qeexo:

FingerSense is an enhancement to touch interaction that allows conventional screens to know how the finger is being used for input: fingertip, knuckle or nail. Further, our system can add support for a passive stylus with an eraser. The technology is lightweight, low-latency and cost effective.

[Vimeo] [Via]

New iOS design resources

  • Tethr bills itself as “The last UI kit you’ll ever need” and “The Most Beautiful iOS Design Kit Ever Made.” I’ll leave that judgement to you, but at a glance it looks like some nicely assembled PSD templates.
  • You don’t actually need Photoshop to leverage these templates, either: Adobe’s Web-based Project Parfait can extract content “as 8-bit PNG, 32-bit PNG, JPG, and SVG images.”

Concept: A multitouch car UI

Hmm—I’m not sold (at all) on the discoverability of this thing, but I remain deeply eager to see someone break open the staid, hoary world of in-car electronics. (The hyped Sync system in our new Fusion is capable but byzantine & laggy. What’s waiting a second+ after button pushes between friends—besides roughly 100 feet traveled at speed?) What do you think?

[YouTube] [Via Christian Cantrell]

I got (2)99 shortcuts but just Shift ain’t one…

Transylvanian non(?)-vampire Sorin Neica has created the “Keyboard-S,” an enormous (yet thin) keyboard designed to drive Photoshop & potentially other apps. It’s sort of a Configurator panel that’s sprung right off your screen:

I have a hard time imagining it taking off, and funding on Kickstarter is pretty anemic to date, but I found the idea interesting enough to share. [Via Gary Greenwald]

Now available: Stand In (UI prototyping straight from Photoshop)

According to the team, the new Stand In will let you:

  1. Share your prototypes with teammates and clients. Let them experience your designs on their devices instead of scrolling through PDFs on their computers.
  2. Design and use your prototype in real time. As you make changes in Photoshop, Stand In sends the changes to the fully functional prototype.
  3. Move past boring static screens. Add buttons with press states, content that scrolls, modals, and more!
  4. Bring your prototype to life with screen transitions and animation. Stop telling people how the app is supposed to work. Start showing them.

The tool costs $25/mo. & requires a Mac running Photoshop CC.

“Much more than image extraction,” writes Photoshop’s Tim Riot, “Stand In takes positioning, styling, state, even motion data, from PSDs and creates prototypes that feel like real apps which you can view on your iPhone. This capability, to fluidly create in Photoshop and seamlessly output designs to any context, is at the heart of the Generator technology.”

[Vimeo]

They snuck in a flux capacitor!

Here’s a great idea, featuring great UX details.

People loved the photo backup/sharing startup Everpix, but it keeled over after netting just ~6,000 paying customers. (That’s hardly surprising in a world where backup & sharing come free with every phone.) It started to popularize a neat feature called Flashback, one that showed photos from your archive taken exactly one year ago.

Now I’ve found Timehop, a free iOS app that finds the images you shared across various social networks, then gives you snapshots from one, two, and more years ago. The daily push notification it sends provides a little treat I’ve come to anticipate.

What sets the app apart, though, is the delight its creators take in otherwise-mundane UI details. The spinning loading indicator is a Back To The Future-style flux capacitor:

Flux

(In the app itself it animates.) They’ve also enjoyed making their mascot Abe paw at the pull-to-refresh indicator, seen here captured by Beautiful Pixels:

 

Well played, guys. Can’t wait to see what you cook up next.

[YouTube]

Tastemade: The proverbial 1-inch hole

“People don’t come to us because they want 1-inch drills,” the CEO of Black & Decker is said to have remarked, “They come to us because they want 1-inch holes.”

The beautifully executed app Tastemade (App Store) represents an interesting evolution in creative software. Instead of offering an open-ended toolset for doing any number of projects, it aims to do just one thing well—namely, produce short, highly watchable person-on-the-street reviews of restaurants. The entire interface is built to walk you through making & sharing exactly one kind of content. Through constraint + automation, it tends to quickly produce a very nice “hole” (example).

The app is full of nice design touches. For example:

  • Based on its knowledge of your location & Foursquare data, the app can guess which restaurant you’re visiting, auto-populate the title field, then choose an appropriate font/music combo (which you can then change).
  • You’re prompted to capture a number of shots, and a colored progress indicator helps ensure you shoot enough but not too much.
  • When you go to choose a color look, your existing clips are played back at 2x speed, making it easier to see the impact of the filter on more footage.
  • One of the clips you shoot of the venue is placed behind the title & blurred.

Tastemade

Now, is this particular problem worth solving (i.e. do a lot of people want to record, share, and watch restaurant reviews)? I have no idea. (I’m not allowed out of the house; thanks, kids.) I think, however, that the radically reduced barriers to building & distributing software will keep reshaping the creative-tool landscape, producing more highly focused apps that nicely address one specific need.

Rendering real-world 3D content in real time

MIT is making pure magic:

Check out some below-the-table stills on Colossal.

inFORM is a Dynamic Shape Display that can render 3D content physically, so users can interact with digital information in a tangible way. inFORM can also interact with the physical world around it, for example moving objects on the table’s surface. Remote participants in a video conference can be displayed physically, allowing for a strong sense of presence and the ability to interact physically at a distance. inFORM is a step toward our vision of Radical Atoms. 

[Vimeo]

AppSeed turns sketches into HTML, PSDs

Lean startup methodology strongly emphasizes paper prototypes: What’s the simplest, fastest, lowest-cost thing you could do to increase learning & decrease risk? To that end, AppSeed aims to let you sketch on paper, then turn the results into functioning, HTML-based app prototypes:

Interestingly, it ties into Photoshop:

Test your design on the phone and edit it in Photoshop through PS Connection.  This creates a Photoshop document that has all your drawn elements on their own layers, giving you the pixel perfect control to move your design into the next stages of production.

AppSeed

[Via]

Stand In: UI prototyping straight from Photoshop

The first fruits of independent developers extending Photoshop’s new Generator feature are starting to arrive.
“Much more than image extraction,” writes Photoshop’s Tim Riot, “Stand In takes positioning, styling, state, even motion data, from PSDs and creates prototypes that feel like real apps which you can view on your iPhone. This capability, to fluidly create in Photoshop and seamlessly output designs to any context, is at the heart of the Generator technology.”

New app Composite helps Photoshop design for screens

“Design with Layer Comps… Link screens by naming layers… Open in Interactive Mode.” Sounds promising.

Composite is a brand new way of creating interactive prototypes. It automatically connects to your Photoshop® documents and converts your mockups into interactive prototypes in seconds. No need to export images or maintain tons of hotspots.

While designing in Photoshop® you can also get a live preview of your design directly on your device, ensuring the design works in the right scale and context.

[Via Tim Riot]

The multitouch fish tank, door handle, and more

Touché is a funky interface project from Disney Research, turning everything from liquids (!) to door knobs into multitouch surfaces:

According to the project site, the technology “can not only detect a touch event, but simultaneously recognize complex configurations of the human hands and body during touch interaction.”

We added complex touch and gesture sensitivity not only to computing devices and everyday objects, but also to the human body and liquids. Importantly, instrumenting objects and material with touch sensitivity is easy and straightforward: a single wire is sufficient to make objects and environments touch and gesture sensitive.

WiSee recognizes gestures through walls

What the what?

WiSee is the first wireless system that can identify gestures in line-of-sight, non-line-of-sight, and through-the-wall scenarios. Unlike other gesture recognition systems like Kinect, Leap Motion or MYO, WiSee requires neither an infrastructure of cameras nor user instrumentation of devices. We implement a proof-of-concept prototype of WiSee and evaluate it in both an office environment and a two-bedroom apartment. Our results show that WiSee can identify and classify a set of nine gestures with an average accuracy of 94%.

 

[Via Bill Roberts]

I just found my new favorite weather app

John Gruber once wrote, “In hindsight, I think the use cases for the original iPad are simplicity and delight.” Haze for iPhone nails that mission for weather:

“Is it going to be warmer tomorrow? Don’t read it. See it. The beautifully animated background shows you the trend. Use Haze frequently to unlock colorful themes and customize the look.”

The UI rewards exploration with lots of polished details, and the use of theme unlocking is an interesting way to encourage active use.

The one downside I’ve detected thus far is that the reliance on taps & gestures rather than on traditional buttons & labels leaves some functionality obscure. I feel dumb for not having discovered one of the most basic operations (tapping the central readout circle) on my own. (I hadn’t seen the video before downloading the app.) Even so, the app’s easy to navigate & a joy to use.

Oh, and if you like this sort of thing, check out Summly for news. It crashes too much & the summaries aren’t always great, but it’s lovely enough to explore that I stick with it.

CTRL+Console: iPad control for Lightroom & Premiere Pro

Check out Jeff Chow’s (now funded) Kickstarter project:

What do you think? It’s great-looking, but I remain a bit skeptical about using touchscreens (which obviously lack the physical variation of a keyboard or dedicated hardware controller) in this way. If you’re a Photoshop user with an iPad, are you using Adobe Nav–and if not, why not? I suspect the problem is that one has to keep glancing over at a touch screen, whereas one can navigate a keyboard (or physical jog wheel, etc.) simply by feel. Yet the concept remains alluring, so I’m curious about others’ assessment.
[Via James Cox]

Using Kinect to turn objects into puppets

Fascinating!

KinÊtre is a research project from Microsoft Research Cambridge that allows novice users to scan physical objects and bring them to life in seconds by using their own bodies to animate them. This system has a multitude of potential uses for interactive storytelling, physical gaming, or more immersive communications.

“When we started this,” says creator  Jiawen Chen, “we were thinking of using it as a more effective way of doing set dressing and prop placement in movies for a preview. Studios have large collections of shapes, and it’s pretty tedious to move them into place exactly. We wanted to be able to quickly walk around and grab things and twist them around. Then we realized we can do many more fun things.” I’ll bet.

Pretty darn cool, though if that Kinect dodgeball demo isn’t Centrifugal Bumble-Puppy come to life, I don’t know what is.

Here’s more info on using a Kinect as a 3D scanner:

[Via]

Levitation as UI

“What if materials could defy gravity, so that we could leave them suspended in mid-air?” ask the creators of ZeroN. “ZeroN is a physical and digital interaction element that floats and moves in space by computer-controlled magnetic levitation.” One could ask questions about precision and practicality, but… holy crap, levitating balls as UI!

[Via]

(T)ether: A spatially-aware system for animation & annotation

Hey, it’s the return of my (not at all) beloved Nintendo Power Glove!
Cynical take: “Oh, you were bitching that UIs requiring you to lift your hands & touch a screen would make you tired? Wait’ll you have to hold up an iPad in one hand just so you can re-create Lawnmower Man! You’ll be built like Jeff Fahey in no time, tuffy!”
Actual take: Cool!

Check out the project site for more info.
[Via Dave Simons]

Touching—sort of—across time & space

In high school I had my first long-distance girlfriend. My dad would roll his eyes at our pre-Net attempts to connect. “Oh, you’re probably eating a cheese sandwich as 6pm, because Jeanne said she’d eat a cheese sandwich at 6pm…”  He was kidding (and wrong), but there’s much to be said for synchronicity across space.

Enter Marco Triverio’s concept “Feel Me.” As Fast Company puts it,

When a friend is typing, you can see where they’re touching on your own screen. And when your fingers match up, from halfway across the world, haptic feedback can allow you to serendipitously touch. In a text-me-later culture, Feel Me enables communication that’s transient and visceral.

I think it’s rather brilliant. And as for Jeanne, sometimes I now see her across space, hobnobbing with Mitt Romney. Funny old world.

The iPad GUI PSD: Now ready for Retina, CS6

Hats off to the guys at Teehan+Lax for serving the design/Photoshop community with this great app creation resource. “It’s based on iOS 5.1,” they write, “and includes hundreds of Retina assets available natively on the platform.”

Because Photoshop CS6 is such a big step forward for interface designers, the new file requires use of the CS6 beta:

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.

Check out the iPad GUI PSD (Retina Display) at Teehan+Lax.

Demo: Filter layers by name, type in Photoshop CS6

Sometimes the best things are the smallest. I’m so weirdly proud of the layer searching shortcuts in PS CS6.

  • You can hit Cmd-Opt-Shift-F to put focus on the Layers panel’s new search field. Start typing and Photoshop will start displaying only the layers whose names match.
  • Hitting the same command highlights the text in the field, letting you start typing again to filter with a new string.
  • Hitting Delete clears the field, making Layers display all layers again.
  • Hitting Return/Enter will put keyboard focus back onto PS proper (consistent with how other text fields work in the app). Esc does the same but also cancels whatever change you just made.

 

Note that clearing the field isn’t the same as toggling filtering on/off with the little red switch to the right. Why? Because toggling the switch is non-destructive: You can set up filtering criteria (e.g. show me all text & adjustment layers), then quickly enable/disable filtering; you don’t have to keep setting up the parameters.

A big deal, used by tons & tons of people? Maybe not. But to me it speaks volumes about quality and craftsmanship, and God help me, I live for this stuff.

Here Grant Friedman of PSDTUTS quickly demos the basics:

Design tools: Gesty & UI Toolkit

Of potential interest to Web/screen designers:

  • Gesty is a set of vector gesture icons useful for UI/UX designers, manuals publishers and many other creators.” $4.99 [Via]
  • The $8 UI Toolkit offers “20 Photoshop Styles, 94 Vector Glyphs, 40 Background Patterns, Shadow Creator Action, 130 Custom Shapes, 10 Ring Indicators, 10 High-Res Photo Textures, 34 Common UI Symbols.” [Via Jason Santa Maria]

Delighting in the details

Interface designer Neven Mrgan made a good point on Friday:

Touch gestures are the new keyboard shortcuts, but the difference is delight: no one ever saw ⌘⇧S and thought “awesome!”

To which I say: Well, no normal person, maybe. 🙂

I remember learning Photoshop and discovering that holding Option would turn Cancel buttons into Reset buttons.  “They didn’t have to do that,” I thought–delighted.  Later when I learned After Effects, the teacher showed that Shift-dragging did one thing while Option-dragging did another.  I asked how one would do both things at once, and though he didn’t know, when I combined the modifiers, sure enough, it worked as I wanted.  “My people, my people…” I thought. And just the other day, I took enormous pride in persuading the Photoshop team to get the semantics of a new shortcut just exactly right.

It’s craftsmanship that counts*, and delight flows from the feeling of speed, power, and control. Whatever the surface, let my fingers–and my brain–fly.

J.

* As Photoshop godfather Mark Hamburg observed, “People pay for features because it’s easier to justify the expense. People adore polish because it makes the product feel good, and that adoration will carry you farther in the long run than features.”

iOS 5 for tots: Quick pro/con

I want Robert Shaw from Jaws to describe my morning as he would a shark attack: “Up comes a reminder on the iPad and the Netflix stops streamin’, and then… ah then you hear that terrible high-pitched screamin’…” Yeah, it got ugly. (Sorry, other conference call participants.)

Good news, though: You can now go into Settings->Notifications, find the Calendar app, and set the notification type from Alert (which interrupts the video) to Banner.  Now our guys can watch their morning Mighty Machines without going ballistic when it pauses.

On the downside, here’s an intriguing little bit of usability research: Finn is often generating four-finger “swipes” (new in iOS 5 for switching apps) when simply trying to drag on the screen. While coloring in lines in the aforementioned Harold, he’d push hard and his little knuckles would register as multitouch swipes.  Thus he’d start switching apps, bringing up the list of apps, etc.  Who knew?

As always, I pine for Apple to introduce multi-user support in iOS.  Now in the kids’ profile I’ll add “disabling global swipe gestures” to “making it harder to exit the app via the Home button,” “disallow scary stuff on YouTube,” etc.

Update: Double who-knew: BubCap home button covers “are just rigid enough to keep toddlers from pressing the home button, yet flexible enough that adults can activate the button with a firm push.” [Via Iván Cavero Belaunde]