Tag Archive / user experience

• A Brief Musing on the Supposed Separation Between Mobile and Desktop

  A couple of months ago, I was looking at a promotional video touting some new technology. Something that was written solely for mobile. They went on about their processes, that by focusing not on the desktop, they were saving file size and increased performance, which is all and fine. Anything to life better, especially on those days when I want information without waiting for everything to compose itself during the morning rush hour. But at the end of this, I wanted to ask this question (which, in hindsight, I should have added to the comments):

  Why should there be anything difference between the desktop and mobile?

  Before answering, think about it real hard.

  Don’t worry. I’ll wait…

  The current paradigm of mobile is based on two things; the mobile phone and the tablet. But isn’t this the same sort of think we had before – the PC as the desktop. Didn’t we got over this? I got over this years ago, especially when my previous job required me to work with both Windows and Linux.

  What I am thinking is that the current paradigm is just as short-sighted.

  Let me put it this way? In a year or less, why not see a mobile device become the desktop?

  Why not give the "desktop" have touch-enable events like its mobile cousins?

  What I am imagining is the mobile/desktop schism not just disappearing. It simply gets redefined.

  If my life is nearly almost located within the confines of my mobile phone, why not go all the way?

  Our perception of the desktop is that of the monitor tethered to an external hard drive and et. al. What about a rapidly approaching near future where our version of the "desktop" is a mobile device tethered to cloud storage.

  Just a thought?

  Don’t wait too long.

• Wanderlust : February 2011

  Sorry for the month delay in blog entries but it’s been a non-stop rollercoaster of travel and events.

  Here is the shortlist of what happened in after the last blog entry and a few important things happening this month:

  WordPress DC Town Hall with founder Matt Mullenweg

  1.31.2001 – Washington, DC

  This event happened at Fathom Creative, down the road from CDG Interactive.  It was well attended and the sponsor even got an internet stream for online viewing and questions.  Matt was really relaxed, calm guest who talked about how WordPress was started (at the heart, WordPress started as a image gallery) and answered plenty of questions about it, running a business, some things in the works/future as well as what could be better. I asked about how it was doing in the mobile world and got the surprising answer (700% in two years! – with apps in almost every mobile platform).

  IxDA Interaction 11

  2.9-12.2011 – Boulder, CO

  Decided to arrive early to this conference (third time for me) to relax in Boulder and get to a workshop for the first time. However, I fell ill Tuesday morning and spent the following 24-48 hours in bed.  Missed the workshop but attended the full conference. I even got to attend an after-party on the first night (it was definitely an experience, especially the music and its location inside the Boulder Theatre). This conference was well attended and did not disappoint, concluding with the keynote speech from Bruce Sterling (design critic as well as sci-fi writer).

  All the keynotes as well as the individual lightning lectures were all interesting in one way or another.  However, the tone, in my perspective as a developer, was different in that were was more of a focus internally than the last two years. Whereas I was more in sync in the last two (especially with mobile coming up big during this duration), this was more internal than anything else.

  • Related stories – http://www.ixda.org/interaction/
  • For related keynotes/lightning lectures – http://www.ixda.org/resources

  One of new additions to this conference was a day for design-related activities. In my case, it was geocaching, where I spend a few hours in the streets of Boulder playing hide-and-go-seek for hidden treasures. (Thankfully, I was well by then!)

  I will be doing a CDG blog entry on my geocaching adventure later on this month.

  Oh, BTW…it snowed 3-5” and went from single digits (Tuesday) to 60s (Sunday) in one week.

  You thought DC had crazy weather!

  Nixon in China

  2/19-20, 2011 – NYC, NY

  I packed bags again the following weekend, for a trip to NYC for The Met’s presentation of John Adams’ 1987 opera Nixon in China. I last heard this opera on CD a decade ago in college but the performance did not disappoint. Well sung by all the performers and John Adams (who conducted his own work) got a standing ovation.

  What was interesting about the opera, apart from the music, was the whole scenery. As a person who grew up during the last glimmer of the Cold War, some of the scenes were familiar from all the news broadcasts during this time (you know, when you only had TV and print).  The opening scene of the Nixons stepping out of the plane matched the videotape footage to a point where it was eerie.  Of course, the big irony, particularly those in the audience, is how much has changed in the almost 30 years that meeting.  As a point, during a scene in the second act, Pat Nixon was presented with a jade elephant. The official near her remarked "We can make hundreds of them cheaply!", which was followed with laughter (with a tinge of irony) from the audience.

  The second act ended with the agitprop play (the music the basis for a Adams’ stand-alone work The Chairman Dance), which really reminds someone of my age about the old Socialist/Communist displays in the 80’s, or more recently, in North Korea. Of course, the big irony is that so much of that change would start two years later.

  Leaving memory lane, I spent a quiet following day listening to three Shostakovich quartet (11^th, 12^th, and 15^th) and Beethoven’s Grosse Fugue, Op. 133 at Bargemusic with the St.Petersburg Quartet. Back home on Monday (President’s Day).

  And that was my month of February.

  Will be returning to NYC for two concerts:

  • March 26 – NY Philharmonic/Avery Fisher Hall for Bartok’s 1^st Piano Concerto
    — I will be able to say that I have heard all three concertos live – 3^rd in DC/NSO (2005) and 2^nd in Boston/BSO (2007)
  • April 16 – Met Opera for Berg’s Wozzeck
    — Heard Berg’s other opera Lulu last year

  Hopefully, things will slightly quieter further in the year.

  Later (multiple crossing of digits…)

• Why Design Now?

  

  Last week, I finally escaped DC for NYC. Got the chance to finally see the Cooper-Hewitt Museum, which is part of the large Smithsonian family. This museum’s focus is on design, whether functional or artistic. I got the chance to look at the exhibit Why Design Now? – part of the National Design Triennial.

  This exhibit reminds me of MoMA’s Design and the Elastic Mind a few years ago but on a smaller scale. In this case, the various themes were grouped into areas such as communication, mobility, and energy. I was very interested in the Materials section, looking at some very beautifully crafted items made with processes that had little environmental impact. For example, packaging or dishware that used local materials (paper/plant material) while being easily biodegradable. And then, there are the eyeglasses…

  I spend most of the day at the museum, soaking in all the design and getting recharged again after three months of work. Anyways, the exhibit is open until 1/9/2011. Enjoy.

• News On The Homefront

  

  NYC IxDA Redux

  A big belated “Thank You” to IxDA New York for Interaction 10 Redux (3/6). It was nice to meet all the people who attended and to see all of the presentations that I missed at Savannah.  Would come back for another event hosted by the group if my schedule allow it.

  Of course, that means I have to start paying attention to the home IxDA branch as well.

  More Opera

  Ironically enough, after NYC IxDA Redux, I went back to New York for my scheduled vacation for Met’s performance of The Nose. This weekend, went back to The Met for Lulu, the Alban Berg opera composed a few years after The Nose. Same decade, different moods but both are considered some of the most avant-garde works of their time. This was the last performance for me this season. Already planning for attending two performances next season in 2011 — John Adam’s Nixon in China and Alban Berg’s Wozzeck.

  Futura

  If you have not noticed, the font has changed in this site. After the font change last year, I decided to re-evalute my choice and changed to the first choice of Futura. I like Super Grotesk and it was choosen because of its closeness to Futura. However, there were just some things that I felt were not right (weight, letter styles) for me. It was nagging me in the back of my mind for a few months. So I decided to go back to the first choice of Futura.

  I am still on the look out for any other Futura-like fonts but the right choice has been made right now.

  Recent Blog Entry for CDG

  Last week, finally completed a book review of Morville/Callender ‘s Search Pattern for CDG and posted on the blog. Interesting read and really changed my ideas about search engines and how search result can be displayed for easier use.

  I mentioned on Twitter (5/4) that this would be my blog for CDG for the next couple of months as I will be spending writing for this blog. A consquenence will be some important announcements about The Wilson Project and Project Charles, as well as some important blog entries.

• What One UI Developer Learned at the Opera

  (Originally published on CDG Interactive/Innate blog, edited by Jennifer Mayne Hoppe)

  Images of the Met production of Shostakovich’s The Nose, produced by William Kentridge –
  Google Search

  A lot of people think of user interface (UI) developers as “tech guys,” but I see myself more as a designer. At its base, design is about solving problems. So I’m really a designer who solves problems through programming. Like any designer, I have to think creatively—and I often find inspiration from the wide world OUTSIDE of my cubicle. (Yes, despite appearances to the contrary, I can function away from the office from long periods of time, like a cubical lungfish…)

  Take, for example, a recent Saturday I spent at The Metropolitan Opera. I watched a performance of an opera titled The Nose. Composed by Dmitri Shostakovich, in 1930, the opera is about an official who wakes up and find his own nose missing, only to find out that it has full life of its own (as well as higher status than he does). The music and the singing were well done, but was really got my attention was the production’s design.

  The design was conceived by South African artist William Kentridge, who is well known for his work with stop animation from drawings and paper cutouts. In this production, Kentridge melds his own aesthetic with historically appropriate references from the 1930s. Specifically, the set design follows the artistic strain of Russia a movement was about breaking and re-interpreting of artistic conventions like the revolution that spawned it.

  Kentridge enhanced the on-stage elements by projecting stop animations into the production. Projected onto the back of the set, the animations looked like early abstract shape animations of the same period in which the opera took place. Then Kentridge mixed the animations with live film and archive film footage. Rather than distracting from the action on stage, these elements truly enhanced the satirical nature of the opera.

  And that’s what really good design does. It frames the content for maximum impact and engages your attention. Great design happens when someone examines a problem thoughtfully and creates a solution that fits so well, it seems like the only solution.

  So now that I’m back “home” in my cube at Innate, I’m taking inspiration from my afternoon at The Met, and striving to find the most elegant, effective, and engaging solutions to the design and technical challenges that I’m working on.

  Such is the life of a UI developer!

• The Well-Dressed Submit Button

  (Originally published on CDG Interactive/Innate blog)

  Hello, again. This is CDG User Interface Developer Ivan Wilson with another lesson gleaned from the top of the snowy, white-capped mounds of work that keep me busy every day. As I explained in my last post, my job is about building the bridge between design and technology. I need to create things that function perfectly, look good, and are useful for users. Here’s how I tackled a recent challenge on-the-job.

  One of our clients, Mondial Assistance, is a large multinational provider of travel insurance. We’re in the midst of revising each of their national B2C sites—more than 20 sites in all, in a variety of different languages. Our core website needs to work as well for consumers in Germany as it does for consumers in Japan—and everywhere in between. And as every web pro knows, content is key.

  But what does content have to do with me, a developer who doesn’t deal (directly) with the spoken language? Allow me to explain!

  The truth is, content is inextricably tied to both design and technology. Think, for example, about the humble button on a web form, like this one. As a UI professional, I need to make sure that this button looks right from a design perspective, and also functions perfectly regardless of the browser or language.

  The simplest solution would be to just take that graphical image and turn into a submit button via HTML code. Or would it? Remember, this little button has to function across 20 sites and in multiple languages. Just imagine the following conversations…

  “Nice button. Nice style. Can you add it to the German site? Oh, don’t forget. The French site is launching next month. We need to use the same buttons there as well.”

  OK, open up Photoshop (or insert your preferred graphics program) and change the text to German. Done. Fine.

  Repeat again…this time in French.

  Repeat again…this time in [insert local language here]

  Before you know it, you’re creating 20 versions of the same button. And that’s just one button on the site. Take into account all of the other buttons that reside on the site, and it becomes an algebra problem: (# of buttons) x (# of languages) = massive headache.

  Let’s take a step back and look at the problem again.

  We need a submit button that is:

  1. Editable – It needs to be easy to translate and manage across sites
  2. Usable – We do not want to create problems or lock out the user, preventing them from finishing their task

  Graphical buttons are out. Sure, I could always use a linked image with a Javascript function to submit data upon clicking. But what if Javascript isn’t switched on? (Surely it won’t be on screen readers and mobile phones). Not good enough.

  The challenge is creating a default state for the button, which functions for everyone, and an enhanced state that looks perfect for top browsers.

  In the end, here’s what I did:

  1. Used an old fashionedHTML submit button
  2. Along with the button, I added an extra bit of code that displays the enhanced state:<span class=”startquote submit”><span>Start Quote</span></span>In this code, I’m using CSS to turn two tags (spans) and enclosed text to appear as the prior graphical button. And by adding Javascript, I can make this “button” act like a regular submit button.

  OK, but now we have two “buttons”. Here is where the magic comes in…

  If you load up the page (without CSS or Javascript), you are the “default” state and the standard HTML submit buttons shows up.

  Now, if you are using a top-of-the-line browser, you have Javascript and CSS well supported. That means that you are ready for the “options” state. When the HTML button loads up, you will get this functional stylized button. All along, the “default” button is still around, just hidden from sight.

  And as the topper, since the text is only text, it can be changed with a couple of keystrokes. Done right, it can stretch to accommodate different word lengths due to translation or editing. As seen below:

  Why only the Latin alphabet? What about Cyrillic? Japanese? Chinese?

  Everything works beautifully. (Well, actually, IE6 has problems with hover states…but it’s IE6, of course.)

  So, there it is. Highly stylized yet functional submit buttons – well dressed for any occasion. And best of all…useful.

• UI or UN? The Life of a Front-End Developer

  (Originally published on CDG Interactive/Innate blog)

  Hello.

  My name is Ivan Wilson and I am a user interface (UI) developer for CDG. I’ll be a guest author on this blog, posting every month or so.

  When I first asked about contributing to the blog (and I’m still wondering whether it was a good idea to agree), I thought it would be helpful to explain exactly what I do. After all, outside the tech industry, front-end/ui developers are a somewhat unknown breed.

  
  UI Developers, in Plain English

  UI developers aren’t full-time designers (though I had a three-month stint as one), but the best of us know enough to have a good conversation with the designers. And we can do more with Photoshop than just adjusting the image brightness/contrast.

  We don’t do full-time back-end programming (though I spend the great deal of my career doing PHP programming), but the best of us know enough to make things easier for the programmer and do some programming ourselves in a pinch.

  Basically, we’re like UN interpreters. We know how to speak multiple languages and if we are really good at what we do, very good things happen.
  Like other interactive agencies, CDG develops many dynamic, database-driven sites. My job is to build out the layer that you see and use every day on your computer or web-enabled mobile phone.

  That means I take all the graphics files from the designers, wireframes from the information architects, and build templates in HTML (or XHTML), Javascript, and CSS (stylesheets). I also have to create web-ready graphics from those same files. In some cases, I might even need to break out some Flash skills or work on other interactive features.

  
  “Well, That Doesn’t Seem Too Hard . . .”

  It sounds easy.

  Everything is easy before testing.

  And testing requires…six browsers in two platforms…or more.

  Still sound easy? (I hear a few plates dropping…)

  And it has to look good and function without a hiccup.

  Did I mention all this has to be done before passing it on back-end programmers?

  And if I move a pixel in the wrong place, the designers have pitchforks with my name engraved on ’em.

  High stakes, indeed.

  Yes, it’s definitely like being a UN interpreter.