Category Archives: User Interface

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]

Introducing Photoshop Touch

Combine, Edit, Share. I’m delighted to introduce Adobe Photoshop Touch, a new tablet app for creative imaging. With PS Touch we’re bringing Photoshop fun & power not only to new platforms, but to a whole new audience.

Here’s my brief overview:

To see the app in action, check out Russell Brown’s 10-minute feature tour:

So, when can you get it, and what does it cost?

We plan to release Photoshop Touch for Android shortly, after which we plan to bring it to iOS. When we talk about reaching new audiences, we’re not kidding: Photoshop Touch is priced at just $9.99.

So (to anticipate an inevitable question), why Android first? Many Adobe apps (Adobe Carousel, Ideas, Photoshop Express, Eazel, Color Lava, Nav) have already been released on iOS first, and it’s good to support customers across platforms. We’re busily coding for iOS as well, so I wouldn’t make too much of this particular detail. No matter what tablet(s) you use, we can’t wait to get Photoshop Touch into your hands.

One last thought for now: We’re still very, very early in the evolution of mobile devices for creative work, and Photoshop Touch–along with the many other Adobe touch apps announced today–is just a beginning. We’re eager to hear what you think, and I’m looking forward to hearing ideas & questions here and on Twitter (@PhotoshopTouch). (Today I’ll be largely offline, showing the app in person at Adobe MAX, so I apologize in advance if I’m slow to respond.)

What's with Photoshop & multiple undos?

Over on feedback.photoshop.com, customer Michael Piontek notes the following:

Unlike most modern apps, Photoshop only has a single “undo”. If you press command-z a second time, Photoshop will redo the change instead of continuing to undo. Not even Illustrator or InDesign works this way at this point.

To work around this issue, I customize my keyboard shortcuts to use “step backward” (command-z) and “step forward” (command-shift-z). For the most part this works great and I’ve been very happy with it.

But it brings up a new problem: if I change the selected layer, then press command-z (“step backward”) then the layer change is undone as well.

Michael is touching on two separate issues:

  1. The keyboard shortcuts used for undo/redo
  2. Layer selection changes when using “step backward” instead of “undo”

1. Photoshop’s unusual Cmd-Z mapping is due to the fact that the app lets you toggle across multiple history states in one keypress.

For example, you might do something, then click 10 steps back in the History panel.  Let’s say you then hit Cmd-Z.  Would you expect Photoshop to undo the most recent operation (getting you back to where you’d been prior to the last click), or to go to the 11th-back history state (that is, to go further back in time)?  I’d expect PS to do what it does now: it undoes the click instead of digging me deeper.

I’m not sure it’s possible to preserve the current (and to my mind correct) behavior while also making Cmd-Z work in the more common way (which would also be correct). Of course PS could ask customers to make a choice via a dialog, but that’s just a recipe for blank stares.

2. I can’t think of a good reason for the current behavior. When Photoshop added multiple layer selection in CS2, we made some changes to avoid problems caused by old crutches for not having the ability to select more than one layer at a time. This behavior with the layer selection changing when using “step backward” appears to be a rough edge from that work, so it’s worth asking the team whether this behavior can be changed.

Note that a user has provided nice workaround leveraging a script.

[Thanks to Jeff Tranberry for his assistance in researching these questions.]

Beautiful Kinect Graffiti

Jean-Christophe Naour uses the motion-sensing gaming platform to paint with light, using his whole body:
[Via]
I’ve had a somewhat similar idea: use the gyroscope a smartphone (or multiple phones) to capture a person’s gestures in space, then use the resulting paths to do 3D painting & animation. That work could happen on the phone itself, or the paths could be imported into After Effects & other apps (think MotionSketch.next.), or even run interactively in Flash, WebGL, etc. Maybe the idea’s too esoteric to have legs, but I’d love to see it tried.

How to collapse/expand Photoshop layer groups (folders) at once

Designer Erica Schoonmaker tweeted the other day,

I wish there was a shortcut to collapse all layer folders in Photoshop.

There is! Thanks to Jeff Tranberry, I can now point out the following*:

  • Open/close all layer groups (folders) at the current level of hierarchy: Cmd-click the arrow next to the group
    • This is handy when you want to open/close, say, all the top-level groups without disturbing the open/closed state of any groups nested within them.
  • Open/close all layer groups nested within the current one: Opt-click the arrow next to the group
    • This is nice when you want to open/shut a bunch of nested groups, without affecting any that lie outside the target group.
  • Open/close all layer groups, period: Cmd-Opt-click the arrow next to a group

 

So, to keep things simple: when in doubt, Cmd-Opt-click a group’s arrow and you’ll collapse/expand all groups.

*On Windows please substitutes Ctrl for Cmd and Alt for Opt.

Feedback, please: A Photoshop iPad companion

In August I asked for ideas on tablet-based companions for Photoshop, and last week at MAX we demoed a paint-mixing prototype. Now the designers have taken a crack at mocking up some companion features that could run on a phone or tablet.
In a nutshell, you get:

  • groups of task-based tools & commands (e.g. all your photography/retouching tools & buttons on one page, or all your painting ones, 3D ones, etc.)
  • interactive, task-based tutorials that drive Photoshop, helping you get things done

The idea is to let you work faster–offering more organized access to tools & knowledge. What do you think? What would you pay for this?

Feedback, please: Potential Web/drawing features in Photoshop

Photoshop’s vector shapes & layer effects (strokes, gradients, etc.) are mainstays of Web & mobile design work, but they haven’t gotten updated in a while.  If the Photoshop team were to improve this area of the app, what improvements would you find the most important?

The following list isn’t exhaustive, but it includes popular requests we’ve heard.  It would be great to get your feedback via this quick survey.  We can’t do everything (certainly all at once, anyway), so please let us know what matters most.

 

  1. Enable “real” vector shapes (stroke & fill directly editable, without reliance on layer effects or a dialog box)
  2. Support dashed- and dotted-line strokes
  3. Enable smart shapes:
    1. Preserve corner roundness when scaling rounded rectangles
    2. Support other parameterized shapes (e.g. stars with an adjustable number of points; lines with arrowheads)
  4. Make various layer effects enhancements:
    1. Apply effects at the layer group level
    2. Re-order effects
    3. Duplicate effects (e.g. apply multiple strokes per layer)
    4. Enable panel-based editing of effects (instead of relying on a dialog box)
    5. Add/edit effects on multiple selected layers at once
    6. Make graphical styles “live” (i.e. if edit the style definition, all styled objects update)
  5. Enable layer search (i.e. type to filter by layer name or attributes)
  6. Improve snap-to-pixel behavior
  7. Improve text rendering
  8. Export text & graphical styles as CSS
  9. Support guide sets (e.g. for grid layouts)
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs)

 

Notes:

  • We want to know what’s more important than other things, so please bear that in mind when assigning relative ratings.  (That is, don’t make everything “extremely important” or “not important.”)
  • Please don’t tell me that Photoshop should never be improved vis-à-vis Web & mobile design, and that everyone should use Fireworks (or Illustrator or whatever).  You may be completely right about those apps, but it’s just not relevant to this survey.
  • Inevitably there’s some amount of overlap among these items (e.g. applying effects at the layer group level would offer an alternative to applying multiple copies of one effect on a layer; for example, you could stroke a layer, then add another stroke on a group containing that layer).

 

Many thanks in advance,
J.