Month: May 2012

Recently I got my hands on the Nokia Lumia 900 running Windows Phone with the Metro UI. Also, through internal channels at Citrix, I got a fairly deep one-day primer on designing for Metro via MSFT evangelist-led seminar and related team-based workshops afterwards. So, I’m certainly ramping up on my Metro IQ! Lots to discover, interpret, and apply. Those devs and designers unfamiliar should not naively presume Metro is simply “flat icons” and “big boxes”…there’s quite a well-thought out and clearly defined system for maximum visual and behavioral coherence across multiple screen and device formats (Small, medium, large). Big kudos to MSFT for pulling this off. According to the evangelist I heard, this is the first time in MSFT history to attempt and achieve such a broad-based UI coalescence across multiple business units and devices at nearly the same time. Wow!

The following links offer valuable info straight from MSFT on designing for Metro; definitely worth spending some time studying and re-visiting:

> Case Study of iPad to Win8 Metro

> UX Guidelines for Metro style apps

> UI Patterns for Metro style apps

> Metro design principles

 

And also slides/talks by Mike Kruzeniski, former Creative Director at MSFT who led the Metro design effort, explaining the rationale and inspirations–highly rec watching!

 

For now, I just wanted to share some of my own personal thoughts on Windows Metro, as I’ve experienced it thus far on a phone device (not yet tablet). I also have experienced the recent Metro variant for XBOX 360, which is qualitatively different being as a large-screen, 10 foot entertainment experience.

Metro is, as many others have noted publicly, a refreshingly bold vivid sharp crisply defined novel visual design system and language that successfully avoids yet another “me too” iteration of Apple’s iOS visual style (sorry Android and WebOS, although each has their own, er, charms as well ;-) Again, kudos for pushing a different angle on UI style. The typography is stunning and clear. The panoramic parallax imagery/motion is gorgeously compelling. The semantic zoom (for tablet only now) is slick and smart. The live tiles are interesting, supporting a glanceable UI.

So, after about 6 weeks of varying usage (along with my iPhone and iPad and Kindle Fire ;-), here’s my following observations:

– As Matt Gemmell noted, Metro embodies a strong tone of “information asceticism”: pure starkness of content. Some say content first is great, kill the chrome. Yet I feel it’s so content first that I’ve become lost inside an info graphic, losing my anchors for navigation, at times.

– The “live tiles” makes for a very visually compelling dashboard yet it’s not quite as useful as I’d thought. With iOS Notifications I know immediately the sender and content of emails. With Metro I only know that I got 4 new messages, but no idea of urgency, sender, context, content, etc. Perhaps something to improve?

– The Application list is one long vertically scrolling list of names…Maybe not the best effective or efficient use of the real estate? Why not app icons in a grid? Or rolodex of cards? Hmm.

– Is there too much typography?? I love the direction as said above, but there’s quite a bit to read, just a pinch more cognitive load and processing, I think ;-) Perhaps needs more finessing with the spacing and introducing more visual elements to break up the textuality of text. In some cases I wonder if the type is simply too large and dominant.

– Flat icons fit the overall ascetic aesthetic overall, but becomes somewhat cryptic at times. Of course you can tap the ellipse to get a gentle bump that shows the text labels underneath. But how can we avoid that?

– Love the quirky, whimsical little movements and animations on taps and holds and actions. Some may find them gratuitous (like the emails being sent out or photos sliding laterally across panoramic panes) but again, adds delightful, useful feedback. Also gives the info space a “feel” that’s reactive and alive. Not just static elements but “digitally tangible” in a sense. This makes the interface come alive truly.

– Overall flatness of the space and basic color scheme leaves much to be desired IMHO. As someone who likes texture and yes some skeumorphic elements gracefully done well, there’s a stark monotony to the space that leaves me feeling empty, wanting more…character? identity? soul? Hmm.

– The fluidity and speed overall is wonderful, just as immediately responsive, if not more than, iOS on iPhone. Definitely feels slick and powerful and useable. No issues there!

– Same problem as with Android…the damn physical hard key back button on the device! Argh. As an iOS user it’s very hard to remember that key as the perpetual “get me out” button. Keep wanting to tap out some gesture or tap a dedicated soft navi button.

These are just a few initial thoughts…will keep building on as I continue exploring Metro on other devices as well. But overall a positive fresh direction, with great potential. Eager to see how it evolves further, particularly for desktop and tablet contexts.

 

I saw this answer on Quora describing the “day in the life” of a product designer at Quora, which got me thinking, so what is it that I do on a typical daily basis? How would I answer that question given my current job duties and tasks and goals? And how would that change if I were to change positions or employers? OK, that last one may be a bit harder to answer (perhaps worthy of a separate post entirely ;-) but below is my own quickly drafted attempt at articulating “A day in the life of a principal designer” at Citrix. In general it’s really a composite picture encompassing several various days recently, but you get the point.

————-

– Have early AM web conf call (using GoToMeeting HD Faces) with remote dev team on project progress: status of prototype development, UI design iterations, issues/concerns/questions, etc. Identify core issues, flag follow-ups, reply diplomatically to criticisms and raise counter-points respectfully.

– Update notes and action items afterwards via email and/or twiki as appropriate

– Answer emails missed during the call.

– Check Twitter and Facebook. Retweet or like/share accordingly.

– Send out emails to people for events coordination (speaker series, summits, workshops), verify scheduling with team exec admin and reserve venues/resources as needed.

– Check Twitter and Facebook. Retweet or like/share accordingly.

– Sketch ideas for product concept in my notebook. Move to studio to explore on whiteboard. Gaze out at mountains in the distance, daydream and sketch and ruminate on new possibilities.

– Lunch break with team. Maybe Pho or Indian or Sushi, as warranted per collective appetites.

– Return to design space, wander around, visiting various designers and directors. Ask about projects. Explain what I’m working on, Identify touch points if any, flag any follow-ups.

– Answer emails missed during lunch.

– Check Twitter and Facebook. Retweet or like/share accordingly.

– Translate sketch ideas into Fireworks for digital production. Consider them hi fidelity wireframes or rough visual concepts. Interrupted a couple of times. Got Twitter and Facebook running on second monitor. Concurrently (ha!) updating statues and digital design files.

– Check-in with another project team. Offer inputs and offer to respond/create deliverables. Thinking of pulling in my boss for some executive maneuvering and reinforcement. Hmm.

– Check Twitter and Facebook. Retweet or like/share accordingly.

– Munch on an apple while walking around the studio area, visiting with designers. Noticed a group struggling with a concept, I hover and suggest ideas. On my merry way back to my desk.

– Sit at the Mad Men couches and sketch ideas for new concept, and/or articles and conference talks while listening to Spotify on my Beats headphones. Great place for thinking and writing! Also for people-watching with all the foot traffic passing by. Chance to say Hi to folks haven’t seen in awhile. Build social relationships.

– Get emails from non-supported teams wanting Office Hours support. Scheduled for next slot. Shoot email to colleagues requesting their participation in Office Hours to help figure out support, etc.

– Receive a head’s up about upcoming design workshop needing my help and/or facilitating direction. Make mental note to refer to previous workshop methods/plans and adjust as needed per project team. Need to schedule a “prelim” call to assess the project needs.

– Meet with team on drafting a conference proposal about latest UI design approach, success, lessons learned. Identify venues to shop the proposal around.

– Text from boss about possible “firedrill” needing me to stand-by for possible deployment on this project. We like to refer to this as “Navy Seal” design work, informally. Rapid expert design! Great times to dive and thrive.

– Check Twitter and Facebook. Retweet or like/share accordingly.

– Time to head home…possibly #nightshift activity per the day’s projects and looming deadlines or conf calls demanding to see fast results. The cycle continues! Never know what the day shall bring ;-) Gotta be adaptive!

I was fortunate to have attended the fantastic TEDxStanford event the other day (videos to be posted soon). It was my first time attending any TED event (although I’ve viewed various TED talks online) and it was even more impressive, inspiring, thought-provoking, creative, energizing than expected. There’s something about “being there” live that made it quite impactful, all of the short 15-20 minute talks and performances, nicely “lighting up different parts of the brain”, as the host described.

Also it got me wondering just what is that makes a TED talk so memorable and special? What’s that secret sauce (and primary ingredients) that we could adapt into our own presentations at work? Based upon my own personal recollection and experience, here are my quick takeaways:

– There is a vivid, powerful, personal emotional connection to the topic…such as a family member, close personal friend, or even yourself as the ultimate protagonist who suffered severe trials yet overcame them to achieve a more enriched, positive outlook on life.

– A strong sense of storytelling, not just fact-conveying. While many speakers had Powerpoint slides, and some were even quite dense or visually just ugly, they didn’t detract because the speaker was telling a vivid, authentic story that moved the audience.

– Use of familiar analogies or metaphors to relay and distill highly complex ideas. Of note was one speaker describing his methods of investigating cancers via novel molecular cell technologies. He used the metaphor of “molecular spies” using “walkie-talkies” to send reverse signals about possible cancerous developments in the body. Such familiar phrases made the concept approachable but also the speaker seemed more genuine and casually “down-to-earth”, despite being a truly brilliant PhD scholar.

– Lots of imagery, from the shocking and disturbing (like various physical medical disorders) to the hilarious and wonderful (like self-parodying images or videos). Minimal text and more visual and auditory stimulation.

– Very well polished, rehearsed, practiced, and researched talks. How many times did these speakers say “umm” ? Not much if at all. It truly seemed they were speaking from their heart or mind, authentically, not just trying to verbalize memorized lines. There’s a certain embodiment of the message that makes conveyance very real and meaningful. As EM Forster said, “only connect”, and indeed the best TED speakers do just that at a very profound level.

– Every talk compelled me to think about my relationship to my friends, family, and world in a different way. There was some appeal either explicit or implicit to affect change in the world for the better, either through specific action or critical thought about mundane issues.

 

 

I recently attended the monthly  BayCHI event held at PARC, featuring a couple of talks around “the future of user interfaces”. I was only able to see the first one, done by Nathan Shedroff, currently chair of CCA dMBA strategy program and acclaimed author of Experience Design, amongst other titles. A wonderful presenter and all-around great guy, Nathan previewed his upcoming book “Make It So“, which looks at science fiction films & TV shows as inspirations for user interfaces and their enabling technologies. Very fun, inspiring talk and definitely a book I’d recommend picking up to add to your design inspiration arsenal. Below are some of the key themes Nathan emphasized…

– Mixed modalities & multiple paradigms can shape one’s perception of how interfaces fit within one’s lives, taking on humanized and cultural qualities suitable (or not) for interaction (touch + voice, device vs surroundings, visual or tactile, avatar vs tool vs activity, etc.)

– Sci-fi stories have shaped popular conceptions and more importantly, expectations, for what technology can offer us, enabling a “better life”. We all expected jetpacks and flying cars. But the force of real cultural, technical, and human factor constraints have led us to experience that which is appropriate (ex: flying cars would be a massive nightmare to deal with! or jetpacks burning people, awkward social conventions like flying away, etc.) Budgets and laws are a good constraining factor for tech advancement in some ways!

– Specific references:

— Motorola StarTAC was almost literal embodiment of Star Trek communicator device, even the name hints at its inspirational source. Physical truth to the notion that it takes about 50 years for sci-fi tech to become real and popular.

— in 1987 PADD, used by Starfleet within the Stark Trek universe…just like iPad! Sort of.

— Tablet PCs were largely driven by movie fantasies with the slate form factor and stylus interaction. Even some featured without pen but just touch-based.

— The “Knowledge Navigator” concept video by Apple in 1987 was ultimate fantasy sci-fi tech film, anticipated much of what we have now, like smartphones, wireless, Siri, etc. Inspiring and useful tool for looking backwards, reverse reflection of current and future possibilities.

–Personality within devices and tech, makes for anthropomorphic approach to tech, suitable for human interaction. Truly and literally social interaction, not just social media. For example, R2-D2 with minimal cues (just sounds and slight movements) felt very “human” and real. We empathized despite R2-D2 not having a literal face, arms, in typical quadruped fashion. Also Knight Rider with the voice and automotive behavior.

— Nathan suggested that even the infamous Amazon “one-click” is an example of anthropomorphic design: like a concierge with recommendations and also super easy, simple, trusting, with confidence of the results. Hmm!

— The Pixar short “Lifted” shows the madness of complex interfaces, afflicting the hapless alien junior pilot undergoing some training exam. Too many buttons without any labels! So films can be a satirical reference for criticism of our current situation.

— Finally, a great example of how holography in Star Wars conveys social hierarchy. Notice when Palpatine or Yoda and others are projected large versus small in different contexts. Consider the implication for remote web conferencing with video, or telepresence or chat. Hmm!

Some fun examples and interesting ways to re-consider existing and future user interfaces per sci-fi. As Nathan concluded, as designers we create fictions, and we are telling stories that enable our cultural expectations and imaginations. Science fiction is just one great resource to tap into!

 

 

I recently attended a guest lecture at Citrix by renowned Stanford Professor Bob Sutton. Very quickly paced, insightful and thought-provoking, filled with nice stories and anecdotes to help qualify the broader principles Sutton advocated in support of “scaling excellence”. Below are my notes and key takeaways…

Scaling excellence refers to spreading “superior ideas from the few to the many” in some organizational context (a team, a department, an entire company, etc.), based upon promoting a “mindset” which Sutton defined as “a set of beliefs centered on the why (motivations, drivers), that guide behaviors”. He smartly pointed out that you should pave forward a “mindset”, not just leave behind a “footprint” that’s easily forgotten.

On Facebook…

In particular, Sutton referenced the Facebook ethos and their model for cultivating a “Facebook” mindset and scaling that across the organization sans dilution and dispersion as more people join the company. He pointed to Facebook Product VP Chris Cox as a literal embodiment of the Facebook ethos, and grand promoter of it internally, via his “sweet, genuine” personality that is highly admired within the company. This ethos is reflected in certain key phrases uttered by Cox:
– “understand the whole codebase”
– ” move fast and break things”
– “touch the metal”
– “any job you have is temporary”

Clearly it’s a dynamic, iterative model of thinking and working! Gotta be flexible and roll with the punches. This is inculcated within new Facebook engineers from day one as part of a 6 week bootcamp (!), whereby new recruits don’t know what their specific job duty is and are rotated among several projects (like 12-13)…but in the first week they have to do something that they could show their Mom to make her proud. Ha! So that really encourages the engineer to get hands dirty very quickly, a literal “bias towards action” (to borrow a phrase from Stanford d.school). But it’s also very cultural, to get that mindset and habit established early on, from the get go. Sutton mentioned that Cox is very afraid of watering down and losing this core truth to the Facebook culture as more engineers join the company and they become geo-distributed (apparently they just opened a NYC office). Time will tell…

Key Principles

Moving on from Facebook, Sutton ran through a set of broad principles for “scaling excellence”…

** More vs Better tradeoff
— Just like with feature creep, too much info/rules/policies/structures as the org grows is a burden on cognitive load, increases complexity and difficulty, degrading the cultural core.

** Alone vs Cooperative
— Highlighted several companies like P&G, Mozilla, and Pixar which took several approaches to dealing with competition and retaining their core culture (connect & develop vs. open source vs. going alone)

** Catholic vs Buddhist approaches
— Ah, the eternal struggle ;-) Do you declare a cultural value system and force everyone in a Catholic manner with strictness, or create a general value framework that each team/locality adjusts for their needs? Pros/Cons either way.

** Hot Causes need Cool Solutions
— How to get teammates excited and emotional about a dire deep cause that drives the company, and generate cool solutions for customers? Gotta have both to succeed. Hot emotion, and valuable outcomes. Else folks get excited for nothing, a waste.

** Connect and Cascade
— A way to foster connectivity and trickle out the learnings and values across teams, etc.

** When in doubt, cut it out
— Sutton highlighted the Intuit Design For Delight initiative which had tons of complex info and raised lots of doubt initially. After revamping their “pitch” into a pithy triangle diagram, more Intuit employees bought in.

** Little things have big impact
— Things like word choice, moving furniture around, body postures, small recognitions for good behaviors, etc. Small victories! Gotta celebrate them too. Builds confidence and credibility when you ask for the truly big things.

** Don’t put up with destructive attitudes/behaviors
— Obviously if there are die-hard cynics and naysayers, dump them and keep moving forward. Don’t poison the well, be swift and move on.

** Swarming is not Scaling
— Interesting point… “swarming” is when you’ve got a group all super excited but then don’t implement, translate passion into actionable results. To scale, you need to act, connect, demonstrate, do real things that are exemplars.

Ultimately to scale excellence in the org you gotta walk the talk, truly embody the attitudes, beliefs and behaviors in your daily actions, serve as role models / exemplars for others to emulate (implying the inherently leadership nature of scaling excellence…want others to do as you? then you gotta do it first!) People are creatures of habit and sociable, so gotta leverage those small simple truths of human nature when trying to effect massive change in complex org contexts. These ideas and princples from Prof Sutton should help!