Tag Archive | UX design

Speculative Technology Design: Transparent Computer Screens

It's shooting at my imaginary cat.
Okay, so sci fi shit’s been on my mind lately.
“dubyateehef you mean by that” you might ask, and the clarified statement would be “speculative technology designed for science fiction films has been a bee in my ass for months now and that’s like totally forever so I’mma gonna blog about it”. All of the spec-tech in films can fit under the chapter titled Really Cool Looking, but most of it falls under the heading Like Hell That’s Good Design. Don’t get me wrong- none of my arguments are against how the supposed design functions within the frame of the greater needs of storytelling and world-building. Those needs come first and foremost and anyone designing for a storytelling medium knows this. But the problem is that this speculative technology design often becomes the blueprint for ACTUAL research that gets done. People still talk about Minority Report with fond sighs, for fuck’s sake. It’s due in large part to the designers on the film doing such a great job at making something SEEM like it’d be a good idea. After all, the actors are all whizzing about and their gesture/voice/dance commands just make the computer solve the mystery/stop the bomb/find the terrorist/win the girl and it’s LIKE MAGIC OMG WE SHOULD TOTALLY BUILD THAT YOU GUYS.
It’s a fact. The storytelling itself affects how we look at what’s designed within the story.
But I’m not here to hate on those designs. They’re fucking badass and the hard, underpaid work of all those VFX and animation teams did some seriously awesome magic that served the stories they were in. I love it and every time I see some sweet new work it makes me catch my breath and go IWANTTHAT right along with everyone else.
But, as a ux designer, I feel obliged to take the design seriously in a different way. I have to think about the ergonomics, the color usage, information/function hierarchy, the gesture conflation- and not in terms of making sure all the right actors get their shot of standing behind a transparent computer screen staring in consternation at the warning red blip signaling the incoming missile/breached security measure. That’s what you have to do for film design, but it’s not real ux design.
So what if we tackled some of these speculative technology problems as real ones? How do we develop a design approach for things right around the corner- transparent computer screens, wearables- as well as for those things that are far into our futures, like spaceships and moon stations?
The answer: in applying the same damn principles we apply in design today.
“But no! It’s the future! Everything can be white and shiny and pretty and no one will want to tear their eyes out!” Barring any robot or monkey or zombie takeovers of our planet, there is still one fact that will be the same in the future as it is today: us. humans. Our fingertips will still be of a size to pick our nostrils, our eyes will still have evolved to pick out a tiger in a jungle, our backs will still have problems if we sit for too long- we will still be human, and every problem we approach in design is based around that fact.
So. Enough disclaimers. Let’s start with something small and fun, shall we?

SPECULATIVE TECHNOLOGY DESIGN ONE: Transparent Computer Screens
yes. yes i am.
So this stuff is already being made and shown off at consumer electronic shows everywhere. I know it’s true, I’ve seen it on youtube.
It’s been around for much longer in science fiction films, though. That’s where we’ve seen it, where we’ve grown used to it. It became not an “if”, but an impatient “when”, and that when is in the next few years. It’s the sexy new thing for computers to be: Thin, thinner, now nonexistent except for the murmur of Siri’s voice asking us what we’d like. (A separate blog post: gender and technology.)
So we’ve seen it coming for forever now- but are we really ready to design for it? Let’s see what questions you and I, designer buddies that we are (or aren’t- hey, s’cool bro), should start with.

1. What are some of the possible physical limitations of this hypothetical technology?
lighting: in a bright room, “what’s that smear on the glass?” needs contrast: not only high contrast color-usage, but a darkening film behind it (aka wide drop shadow) so that it can be distinguished from anything behind it.
"Warning your eyes are exploding"
discoverability: “That can be fixed, right?” AND “where the fuck is the ‘on’ switch?” It needs physical-tangible interface at very least for activation/discoverability.
NOOOOOooooo...
focus confusion: a user’s eyes would have difficulty knowing which to focus on- the screen, or what’s beyond it. A headache after five minutes, I’d wager. needs scaleable darkening or obscuring film behind it.
"Dude I got this weird bird virus the other day..."

2. What are the advantages it offers?
foreground/background interaction: if what’s on the screen relates to the objects behind it, then the switching-focus becomes a natural switch between foreground and background.
unobtrusiveness: anywhere there needs to be information displayed in a way that doesn’t completely block vision. Also the unobtrusiveness could make it hidden in plain sight.
flexible space: a space can appear entirely open, if all of its transparent walls/surfaces are switched off, or it could be visibly partitioned off by obscuring different planes.

3. So given these advantages and limitations, what are some possible ideal contexts?
HUDs, military and otherwise: despite how “used” to this we are in video games, real-life scenarios that include a face mask/goggles have very little space, and it’s difficult for the eyes to focus on something that close to the face anyway, so fancy menus and viz are out of the picture. Fancy is a bad idea anyway because the whole point of a HUD display is to assist in a job where you don’t have the time/mental capacity/hands free to deal with all those buttons and displays on a computer.

in the instance of a scuba HUD, reds would be best to use since there's little red in the surrounding environment. It could go from dull reds to brighter to get user's attention.

in the instance of a scuba HUD, reds would be best to use since there’s little red in the surrounding environment. It could go from dull reds to brighter to get user’s attention.


vehicles: they’re like HUDs in the way that you don’t want to create something that’s distracting. Any design for vehicular glass needs to be caveman simple. But there’s also some fantastic opportunities for that foreground/background interaction. The display itself can appear to guide you through traffic to your destination, or warn you of obstructions, shitheads behind you, to stop fucking texting, etc. But if these got made I think there’d have to be a federal law passed that no video games could tap into it. We don’t need IRL Grand Theft Auto. Which would get made, you know it, even if they only made digital people to hit on the sidewalks… still, seriously. This would have to be regulated.
In the case of vehicular glass, text should be avoided. It takes longer to read "Bike on your left" than it does to see red arrows pointing "LOOK, STUPID"

In the case of vehicular glass, text should be avoided. It takes longer to read “Bike on your left” than it does to see red arrows pointing “LOOK, STUPID”


Instruments, scientific and otherwise: Magnification lenses, astronomy telescopes… I can’t think of anything else. But if you could look through a telescope and around a constellation and see a little pointer saying “ORION, see link for details”, that’d be pretty cool.
Display, storefronts: This is what will come first, we all know it. It’ll take advantage of your expectations of glass and show you your “reflection”- only with their clothes/makeup/cars/sexy ladies/whatever. Or taking advantage of the foreground/background possibilities, you’ll see the store through it, and the glass can point you to items you may be interested in, based on your body type/current clothing. Most people will take it in stride, but for those of us who don’t like facebook personalized ads, it’ll weird us the fuck out.
seriously creep me the fuck out.
architectural internal space: From an aesthetic standpoint, transparent screens are a manipulation of light within a space, as well as another level of interaction between the space and the person, as well as person to person. (Theatre folks know this a shitton better than I). It also, thank god, takes us another step away from the Computer Terminal phenomenon, of having a computer inserted as a sour black square into a wall or table. The possibilities are too numerous to go into, from a restaurant that uses flowing glass planes that can be used as conference video screens, to a subtle way to hide away technology, ala Jeeves in Iron Man with all the little menus tucked away in the windows and tables. Or maybe all of the glassware will display animations of tiny mermaids swimming in your drink. I’d like that. (then I drink them and they DIE yes I said it)
and for halloween you could have floating eyeballs EWGROSSYUM

We all know this technology is coming to market soon, and I’m not the first or second person to come up with any of those ideas above. But I have still seen little about design principles with which to approach it (or maybe I haven’t crawled far enough out from under my rock to see it, a completely possible scenario), and the movies I’ve seen that employ it do so in bullshit-but-badass ways, so let this be my stone thrown in those waters.
Any disagreements or ideas of other spec-techs that you think would be fun to take a closer look at- leave em in the comments!

The A-Ha Moment

So the past nine months of designing Glance have been a story of iteration…

iteration_1
after iteration…
iteration_2
after iteration…
iteration_3
after iteration…
iteration_4
after iteration…
iteration_5
after iteration…
iteration_6
well you get the idea.
iteration_7

Designing a piece of software to be intuitive and elegant is blood, sweat, tears, and a splash of carpal tunnel. There’s a hundred-and-one functions that you need, and it has to be well-organized, seem simple, be easy-to-use, and look good to boot. I’ve always felt it’s like cooking.
design is cooking

Out of all the projects I’ve designed for since starting as a UX designer (ooooh so long ago), Glance has proven the most difficult to design, mainly because there are no well-designed precedents for software in this area that are as complex as we’re shooting for. That, and the fact that the audience for Glance isn’t tech-savvy urbanites fooling around with a game. The audience is not just low on the tech-savvy scale, but they have genuine, understandable fear about using technology in their process. This is their research data, their lifeline, their everything. There’s no way they want to jeopardize that data in any way. So while there are many apps out there that give a nominal edge over an older technology, and that works for them to get new users, our app has to be so above and beyond, so friendly and unintimidating, so clear and understandable, that our audience will let go of the technologies they’ve been using for decades in order to take a chance on us.
Easy peezy. (not.)
It didn’t help that my iterations were consistently dozens and dozens of windows long, either. (I’m referring to all the little boxes you see in the pictures above.) I knew I was missing something, some clear path to guide the boat through the reefs. I had gone over many of the iterations with a large number of researchers, non-profits, and students, and they had all nodded along the way, but it wasn’t right. It wasn’t clear enough, I still had to explain too much, and there wasn’t enough surprised pleasure on their faces.

Over the last few days though, a number of events came together to provide for a break:

1– I took a long break of a few weeks from even looking at the UI, and instead spent a great deal of time thinking about why I was doing this and where I wanted to put my energy in the project.
2– Necessity propelled me to design an official logo for Glance (we just joined the local Social Enterprise Greenhouse‘s mentoring program, and so we needed a logo for their site) which forced me to confront the questions of: Everything I can spend paragraphs articulating about what Glance is, how do I boil it down to a visual essence?
3– I read Apple’s IOS 7 design guidelines. Say what you will about it, those designers put an incredible amount of thought into the new design and how the visual and motion design reflects the information design. They got rid of a lot of the old useless crap like skeumorphism, but finally took the next step past flat UI into layered UI, which I had been hoping metro would do but didn’t. (For a great article on that, check out this article on PencilScoop.)

Between high-level priority and identity consideration, the pressures of a deadline, and relief from knowing I had more flexibility in how I wanted to design than I had in IOS 6, I had a few breakthroughs.

First off was the first draft of the logo and aesthetics:

Glance logo
And then, with those aesthetics and that abstract understanding of what Glance was about fresh in my mind, I put all my Illustrator files away, went to my little notebook, and started doodling UI flows.
iteration_9
You can’t see anything in that picture, I know. What, think I’d ruin the surprise now, before the app is out? Psssh.
But my point is that all of it simmered down to two scribbled flows and about ten UI windows each about the size of my thumbprint. The navigation structure, which had before been long and complex, the functionality which before had been like marbles all shoved in a box, had condensed after months of stewing and stirring into something which gave me that wonderful feeling of being “on to something”.
I couldn’t have gotten here if I had over-designed my first iterations. At last, the careful approach I took months ago paid off, by leaving myself still willing to make large changes!
I’m sure it’ll continue to evolve, and I’ll still get things wrong, but there’s little to compare in satisfaction with making an elegant solution for a complex problem.

Lessons Lately Learned

1: Raising Money is Hard.
Nobody told me (until after I launched my campaign, naturally) that successful Kickstarters can take up to a year to prepare for. I had prepared for a few months, not to mention all the effort I had put into networking for months even before that, so I figured I’d be all right. But I’d underestimated how hard it would be to ask for money. This isn’t a personal complex either, it’s a professional conundrum. How do you ask for money without feeling as if they’ll resent you and without burning any bridges? It’s a delicate balancing act you make, and it all depends on phrasing.
how you ask
So I know now what would need to be done to make a successful Kickstarter, but I’m not planning on doing another soon.

2: In-The-Trenches Management Techniques.
So second week into the campaign, a big deadline at my part-time job at Brown began to loom. I work in the Graphics Lab at Brown (a group of undergraduates led by Professor Andy van Dam) that work on various corporate-funded projects. I had recently taken over management of the team so it was my job to make sure shit got done. But we had to get out the first version of our app onto the Windows 8 store by a certain date and between Murphy’s Law and Zeno’s Paradox, we weren’t getting any closer to finishing. The final week before the deadline was a brutal 90-hour work week for me, although I tried to keep it at 80 for most of the students. Juggling work-induced fevers, RIS, eyestrain and pure exhaustion, the experience of managing a team under those circumstances was invaluable.
From lessons on how to manage different personality types… managing different people
To learning how to gauge someone’s capacity with a single look… one look
To becoming extremely aware of managing my own energy and health…
naptime
it was a crash-course in crisis management.
And in the end, what told me I was successful wasn’t that we got the app released and bug-free. It was the fact that not only did my team not hate me for driving them so hard; but that they showed the same dedication and great attitude that they had when we started.
Love those kids.

3: Why Minnows Grow in Mangroves.
When people refer to places like Rhode Island as “small ponds”, I feel the need to correct them. A small pond indicates isolation and lack of contact with the broader lakes and oceans, but that’s not true. With the kind of social media available to everyone now, there’s no isolation. Rather, it’s more that Rhode Island is a mangrove, a slightly convoluted place with a strong sense of interconnected communities. Small non-profits and businesses, branches of larger national non-profits, tech businesses, academics and students… there’s all kinds of fish, and though we each have our mangrove roots that we typically hang out around, we still mingle. And there are larger fish and smaller fish and everywhere in between, but everyone knows everyone else.
mangrove
Since the Kickstarter started and I had the chance to write an article for Go Local Prov about why I came back to Rhode Island, the Providence community really stepped out to support me and my work. Even knowing the closeness of the business, political, and personal networks here in the state, I was still surprised. And it’s provided huge opportunities that I wouldn’t have had a chance at in another state.
phone call
So work moves forward, lessons continue to be learned… the failure of the Kickstarter hit hard at first, but everyone knows you can’t measure yourself by how you fall, but rather how you pick yourself back up. So Alex and I will just need to continue to put in more hours at Brown while we get the first version done, but we’re still shooting for a new-year’s release!

In the meantime… just as a heads-up, my next post will be about Batman.
Just trying to keep it serious in here, folks.
batman starfish

How To Sleep While Starting a Business

Don’t you just love “How To” titles? As if I’m about to tell you everything you could possibly want to know about this topic. Table of contents, citations, bam. Everything. Well, since I only know everything about MY sleeping habits, it will not be that. Yet since I don’t believe I’m a perfectly unique snowflake in this universe, I’ll share my experience knowing there’s others out there who suffer similarly or worse.
Every time I try to sleep these days, I get a circus merry-go-round whizzing around in my head.

circus

My mind starts throwing every email I read, every email I need to write, every new person I met, every new design change, schedule deadline, and frustrating conversation at me in endless circles until I start to feel dizzy. It’s impossible to fall asleep.
Even if I do manage to get to sleep, the anxiety comes out in a constant grinding of my teeth and tightening of my muscles until my dreams are filled with the sensation of being two stones rubbing against each other.
stone
And sleeping pills don’t help. Okay, I haven’t tried the really strong ones, but those are iffy. You know, the whole thing about their being addictive. I’ve never liked being dependent on anything other than fresh air and exercise. But using melatonin (a supposedly non-addictive, herb-based supplement) is only good for falling asleep. And when the anxiety kicks in later that night…

sleeping pills

These problems aren’t new for me. In fact, they’re better than they used to be. I’ve always internalized my stress, which isn’t unusual. But for some reason, it seems like others can do it without suffering many consequences besides the ocassional need to go out and get raging drunk, but my stress has always manifested psychosomatically. So not only are there the common symptoms of perspiring more, higher heart rate, etc, but I also get terrible stomach pains, heartburn, anxiety attacks, and more. Physically, it sometimes feels as if there’s a lit match in my stomach or someone’s compressing all my insides.
diamond
I wish I got a diamond out of it. Seriously.
So when it comes time to actually get some sleep, I look at modern technology and want to yell “come on, gimme a quick fix for my problem, dammit!” After all, we’re in the future already, aren’t we? So shouldn’t there be some non-addictive fix for all my problems so I can shunt my emotional life aside and not let it get in the way of my productivity??
You’ve totally thought that before. Don’t lie to yourself.
But then, in the midst of my sleepless crisis, I remember something I used to use in college. It’s called 9 Beets. An artist took Beethoven’s 9th Symphony and stretched it to 24 hours without pitch distortion, and there’s a site that streams it constantly (just click their link and select ‘open’, not ‘save’). At first, it’s unpleasant to listen to. It’s strange, a bit unnerving even. And as you start it, it feels like trying to stop a rolling car by sticking your foot out the door and dragging your sneaker on the asphalt. Yet if you stick with it and sit in a dark room with some tea and headphones, it brings all the merry-go-rounding to a stumbling, crashing fall. It stretches and relaxes your sense of time, shows you what foolishness it is to be constantly living on a techno beat.
And then… finally… sleep comes.

9 beets

Sometimes it’s hard to accept the fact that we’re human. It’s easy to feel like western culture is shaving away at what makes us “only human” to the point where we look down on those who live with acknowledged limits. “Oh, you can’t hold down two jobs while starting your own business? Please.” “Why would you want a relationship that requires emotional attachment? Just hook up and move on.” “Why don’t you know how to design, animate, manage, and program too? We won’t hire you unless you do.”
And yet at the same time, we’re moving away from that. Offices are improving their quality of work-life, working from home is no longer anathema, and there’s been growing awareness of the long-term effects of working too hard without the play and relaxation.
But it’s hard to accept that in yourself, especially when you’re trying to get a business off the runway (and you’ve never flown a plane before).
plane
But if you don’t accept it, you’ll crash. So I think I’ll be listening to 9 Beets more regularly from now on.

TouchViz Motion Design Animation

TouchViz Motion Design Animation from J. Herron on Vimeo.

Touchviz was a project done at Microsoft Research to explore how gesture-based exploration of data could facilitate not only menu-light interfaces, but could create a richer understanding of the data itself. The paper on the project has been accepted to the ACM SIGCHI Conference on Human Factors in Computing Systems, rendering this video finally no longer NDA.
To learn more about this project, the design process, and the user research which resulted from it, you can see it in my UX portfolio on my website (www.jessicaherron.com).