Putting User Experience to work

UI Designs for Code Editors

Code editors are like toilet paper: Seriously … how can you possibly improve on it?  You type some code, you hit compile, you debug.  I have this attitude lots of times, opting for VIM with simple syntax highlight over something like Eclipse, with syntax highlight, code completion, incremental compilation, code folding, and refactoring support.  But, when I’m full into a project, whipping out Java code, I’m really glad I’m using Eclipse, where these features often help me code faster, with fewer errors.

So, I was thinking of a few features I wish I had.  If you have any or examples of some you like, please send them in.  Include a screenshot if you can.

Scope Spotlight

The first feature I was thinking about was something I’m calling scope focus.  The basic idea is that the you use background colors to identify the current scope level.  If your background is white, then the current scope your cursor is in would be full on white, as the you move away from that scope the background color would gradually darken.  The darkness levels would be a function of the innermost scope in the current file.  Funny, enough, however, XCode has this feature.  I would not have seen it if I had not recently started doing iPhone development.

Here’s a screen shot:

scope_spotlight_xcode

  1. Is the scope my cursor is currently in.  You don’t see the cursor, but it’s there.
  2. Is the enclosing scope, and it’s darker than the inner
  3. The next enclosing scope is darker still
  4. The gutter shows the scopes again, with code folding widgets.  If you notice the gutter above the “4″ you’ll see a slightly darker rectangle, that indicates that there is another scope at that location.

This is really useful and I could imagine that for a language like Python where indentation is used to indicate scope.  For example, if I keep to the 80 columns convention, then I sometimes have to add carriage returns for long lines and this sometimes adds a little indentation.  If the scope is long it can get tricky trying to figure out where the next scope is.  This is specially true if it’s midnight and I’m having a hard time seeing anyway.  This would also be really useful when hand-editing XML.

Back when I was in my early 20s, 10 point was my choice for editing code.  As I get older, I’ve had to crank up the size of my type.  So anything that helps with vision as a programmer gets older is welcome.

I’d like to see this in Eclipse and TextMate.  Maybe it’s there already, and, if not, someone can probably write a plugin or a bundle.  One problem with XCode is that I have to mouse over the gutter to get this effect.  Maybe there’s a way to turn it on?  It would be ideal to turn it off with one keystroke, too, so that I can navigate the file without seeing the effect, then turn it back on again as I focus on a piece.

This feature makes me think of the full-page editing modes in Scrivener and other word editing programs.  I’d like to try full-screen for coding, but I tend to have a few resources open at the same time so maybe it wouldn’t really work.  I also navigate a few files at the same time, so project resource navigation would have to be there.

Current Line Zoom

Make the type of the current line larger.  Here’s a TextMate screenshot I altered to show this feature:

simple_current_line_zoom

This is another vision/text related wish.  Many editors have a feature to change the background of the current line you’re in.  I don’t know if this was its initial purpose but I use it to find out where I am in the code after I come back from a meeting.  Nowadays cursors are small slim lines and not chunky blinking blocks, which often makes it hard to see where you last placed it after an interruption.

Notice I added another gutter, which would show perspective lines to indicate that the 183 applies to the line.  I could have resized the line number too.  I couldn’t decide which method would work better.

One thing I noticed while modifying the screenshot is that the feature would have to keep the left-alignment, so a simple “expand” won’t do, since the text to the left of the “private” keyword would push the keyword to the right, and then you lose the formatting often helps us determine scope.

I also thought of decreasing the zoom from the current line to adjacent lines until the zoom reaches the default type size.  This is not shown in the screenshot above.  The idea would be that adjacent lines would get gradually smaller.

Breathing Space Auto Scroll

This other feature is related to scrolling.  Let’s say you start with a blank file.  As you code, your cursor goes lower and lower towards the bottom of the window or view.  When you get to the bottom, your cursor stays there and any new line you enter is at the bottom of the view.  If the editor supports it, I use a key combination to scroll the view up, so that the cursor is a little more than halfway up the visible area.  Then I keep coding until I get to the bottom and repeat the process.

Sometimes I end up having to add a bunch of carriage returns at the end of the file so that I can get enough “breathing room” to let me scroll the last line to the middle of the view.  This sucks.

Therefore, I’d like to see the following feature:

  1. As you type, if you are getting near the bottom of the page, scroll the page so that the cursor doesn’t go all the way to the bottom of the view.
  2. Allow the user to scroll a little past the end of the last visible character so that the last line of the file is not at the bottom of the view.

This could be implemented by adding a “virtual” view over the actual view.  The top and bottom of the virtual view would be maybe a third of the way (or some configurable distance) from the top and bottom of the actual view.

I think I’ve seen this feature in Emacs.

Have a look at the Natural Programming Project if you’re interested in these sorts of ideas.

I’d like to be able to actually test if these improve quality of code and speed of coding.  Or maybe it doesn’t negatively or positively affect qualitative measures of coding but it does make for qualitative differences in the experience of coding.  In, other words, maybe it makes your coding a little more fun and a little more enjoyable.

Link Dump

Here’s this Friday’s link dump.

Technology

Apple’s WWDC announced new hardwared 3GS and Snow Leopard.  Lots of complaints on the twittersphere, from how boring the presentation was, how few new or noteworthy features were revealed, to outrage at how costly an upgrade to the new hardware will be for existing customers

Google Native Client update:

  • O3D – 3d capabilities!
  • Built into Chromium

Much more

ProtoFish: Advanced hover menu based on prototype.

Google now indexes external resources.  So, if a swf pulls in XML it’ll get indexed and associated with the parent swf (ht to @atul, a great source for tech links).

Lots of great community updates for GWT.  Check out Vaadin; it’s stylish and easy to use.

This is a little old, but, check out the Zune interface on this Gizmodo photo and video tour (scroll down for the video).  I really like it!

Quick Update:  I just got to this in my inbox and thought you’d been interested in it:

Carnegie Mellon Develops Java Programming Tools Employing Human-Centered Design Techniques – Two tools that use crowdsourcing, search, extracting extra info from the docs, and other methods to provide programmers feedback on the use of java APIs.  In their studies, programmers work two to three times faster with the tools than without.  This is personally interesting because a while back I decided, after having learned Flex pretty well, that the IDE with its code completion features and other shortcuts was holding me back; I found that I never bothered to learn or remember a method signature, a package name, or even a class name, because I could just ctrl+space my way to it and get code hinting.  I thought this was bad for several reasons, most important of which was that I didn’t feel like I was understanding the API that well and how a particular part fit with the rest.  So, I ended up coding in VIM and compiling on the command line.  Then a week later I decided life was too short and went back to the IDE.  It might be interesting to see these tools in Flex.

This is work from the Natural Programming Project.

Docs, Guidelines, Info

I’ve been reading up on and thinking through mobile development and user experience.  You can see lots of examples at Apple’s iPhone developers portal but this past week I checked out Google Android Activities and Tasks Design Guidelines

Web Devout is a resource site for web development, bringing together lots of things I usually find myself googling or putting into my local wiki.

Via experientia:

A list of interesting presos from the “From Business to Buttons” conference.

The social life of health information, a report that shows American’s use of online and offline resources in managing personal health information.

The Siren Song of Startups: Great post about reasons for and against working at a startup.  My first job was with a real company, then the possibility of making a huge fortune drew me into startups (since I was living in the Bay Area this was an ever present possibility).  I quickly changed my mind about my reasons for working for startups after my first giant failure, but I continued to look for work at startups because of the opportunity to learn.

Google developer blogs has a recap of GWT related stuff at Google I/O, including links to videos and other material.

10 Things you Need to Know About Wordpress 2.8 I haven’t upgraded yet.

Funny

Graph of pirates killed by presidents.  Obama: 3.   An strong Tufte gallery candidate.

NO. WAY!  C64 twitter client.  Aw, man, nostalgia never hit me so hard.  I started on a C64.  LOAD “*”, 8, 1

Interesting

How does language change the way we think? I still find it easier to do basic math in Spanish than in English.

Research: Think Passssionate – Stanford Social Innovation review has a cool article about cognitive and affective (displaying emotion through facial expressions, for example) affects your chances for VC funding.  Too bad the article is for paid subscribers.

What Makes us Happy? A story about a cool study on what makes people happy.  The study followed several students from Harvard over a 70 years.  The chief investigator of the study concludes That the only thing that really matters in life are your relationships to other people”.

Carnegie Mellon Develops Java Programming Tools
Employing Human-Centered Design Techniques

Link Dump

Here’s this week’s link dump.  Sometimes I’ll break them up into categories, but sometimes the links won’t fit so nicely, in which case I’ll just leave them dangling.  Enjoy.

Fun

Microsoft demoed Project Natal at E3 and it’s all anybody is talking about.  Check out the video.

At last week’s Google nerd event also known as Google I/O, Google demoed a product called Google Wave, which, according to them is what email would be like if it had been designed today, where we’re used to IM, SMS, and … email?  Anyway, the demo was fun and I can’t wait to try it out.  How many times did I write Google in the previous few sentences?

Radovan Semančík gives a thoughtful discussion on Google’s recently demoed product Wave.  He voices his concerns about how the architecture would scale to millions of users, the issues with identity and changes in user identifiers like emails and such, and performance during wave tree operations given the requirements for signing operations.  He’s read the documentation (so you don’t have to … for now) and points out where it is confusing and lacking in description or where it makes implicit assumptions.  Very good read. His blog has some other great entries too.

The World’s New Numbers: An article about changes in birthrates and the public’s fears about immigration.  Some stunning numbers, and check out this quote: “Russia is suffering a demographic decline on a scale that is normally associated with the effects of a major ­war.

Interesting post on frontend engineer’s and their changing, conflicting requirements.

Practice

Daniel Ritzenthaler has an article over at A List Apart titled Taking the Guesswork out of Design.

Useful, Usable and Desirable: Usability as a Core Development Competence is last month’s article on MSDN on usability where two authors describe a set of criteria for evaluating the usefulness, usability, and desirability of a design.

Products

Both the Flex 4 SDK Beta and the Flash Builder 4 Beta are out.  You can check out the announcement and read what’s new in the Flex 4 SDK and read an article by Tim Buntel about what’s new in Flash Builder 4 betaFlash Catalyst is out too.  Flash Catalyst, for those who are unfamiliar, is a tool for creating really quick user interfaces, letting you import PDF and then, almost magically, exporting them as skinned Flex apps.  Flash Builder 4 has some cool functionality related to Data/service modeling.  Point the tool to your Java, PHP, CF, or Web Service and these services are inspected and then made available in a view inside the IDE.  Then you can just bind the service by dragging and dropping onto a component.  Or you can create a form directly form a service.  There’s also Flex Unit support, Hurrah! AND command line support, w00t!!  I can’t wait to finish some work stuff so I can make some free time and actually play around with these products.

The Google Web Toolkit team put up the GWT App Gallery where you can see examples of real world apps using GWT.

Adobe’s released BrowserLab which lets you view exact renderings of your web pages in multiple browsers.  There’s a limited free preview and the last time I checked it was full.  But you can find out more about it and see a screenshot over at Ajaxian.

The Future

.. is mobile.  Farjah Manjoo sees Google’s Android taking a big chunk of the Smartbook market, beating Microsoft.

And that’s it for this week.  Have a good weekend.

Welcome!

Hello, let me introduce myself.  My name is Robert Cadena and I’ve been working in the software industry for over 9 years.  To be more precise, I’ve actually worked on the web side of software development for all those many years with a brief foray into desktop programming, so I’ve been working with UIs hands on since the first internet bubble burst.   I used to work on university websites, startups, and then entertainment movie websites.  Then, one day, I got a job working for a nanotech company creating a user interface targeted at scientists and, although I always thought UI was very important, it wasn’t until I actually saw real people, trying to control and monitor giant machines using my UI that I realized what an impact UI can have, and I’ve used that realization to guide all my future projects.

A few years later I started my own company with a friend, focusing on Adobe Flex.  We won an award form Adobe and our application was used by many developers.  Soon we were working for Adobe and other major companies to customize our application for their employees.  For a year, I also wrote a column for the RIABuzz, a newsletter about RIAs published by Adobe.  Fast forward two years later and now I’m leading the creation of my new company, AppliedUX, a user experience consultancy and development shop.

Now that the history lesson is out of the way I want to tell you what this blog will be about.  One, it is a place where I can write about AppliedUX projects and initiatives but, of more interest to me and to you, it is also a place where I will write about topics related to UX theory and the real world meet.  So, many times you’ll see blog posts evaluating new technologies or discussing interesting findings in the world of human computer interaction, user experience, and development.

Let me start with a really interesting case.  Here’s a study from 2005 where a hospital implemented a Computerized Physician Order Entry (CPOE) system.  Basically, instead of filling out paper forms, physicians and other care providers, typically at a hospital, enter instructions for patient care, like drug treatment, therapies, procedures, &c. on a computer.  The benefits seem obvious; order entry should decrease errors as programs provide constraints and other checks like making sure there are no adverse effects from drug interactions, or preventing a doc from entering a drug to which the patient is allergic.  It should also speed up care, or at least speed up communicating the order.  For example, one could imagine that instructions could be transmitted from an ambulance to the hospital while the patient is in transit or, more simply, even just allowing the order to be transmitted through the hospital instead of having to phone it in or hand delivered to the nurse or doctor.  Anyway, there are a ton of benefits, yet this study shows that the implementation of a CPOE into a hospital coincided with an increase in the mortality rate of patients admitted to that hospital.  That’s crazy!  But how?  Here’s one example:

“The usual “chain of events” that occurred when a patient was admitted through our transport system was altered after CPOE implementation. Before implementation of CPOE, after radio contact with the transport team, the ICU fellow was allowed to order critical medications/drips, which then were prepared by the bedside ICU nurse in anticipation of patient arrival. When needed, the ICU fellow could also make arrangements for the patient to receive an emergent diagnostic imaging study before coming into the ICU. A full set of admission orders could be written and ready before patient arrival. After CPOE implementation, order entry was not allowed until after the patient had physically arrived to the hospital and been fully registered into the system, leading to potential delays in new therapies and diagnostic testing (this policy later was rectified). The physical process of entering stabilization orders often required an average of ten “clicks” on the computer mouse per order, which translated to ~1 to 2 minutes per single order as compared with a few seconds previously needed to place the same order by written form. Because the vast majority of computer terminals were linked to the hospital computer system via wireless signal, communication bandwidth was often exceeded during peak operational periods, which created additional delays between each click on the computer mouse. Sometimes the computer screen seemed “frozen.”

− Unexpected Increase in Mortality After Implementation of a Commercially Sold Computerized Physician Order Entry System

Multiple clicks to get something done.  Network traffic congestion.  Change in hospital procedures.  I’m not familiar with the system so I can’t comment on why something required 10 clicks to get anything done.  Maybe with practice or training users can get more proficient at entering instructions (tabbing between fields is still not something many people do when filling out a form!)

There were more problems.  Nurses and doctors were required to be on separate terminals to enter information.  The policy for drug dispensing was changed and centralized.  Craziest of all, but understandable, doctors and nurses were “locked out”, presumably from the particular order, while the pharmacist was processing the order.  It makes sense, because you don’t want the order to change while the pharmacists processes it.  But, it makes me wonder, how they handled that aspect before, and why there was nothing in place in the new system to let them do this.

The study is a great read, unfortunately it’s behind a paid subscription site.

So, what do these kinds of stories say about UX and HCI?  I use these stories and cases to guide how I approach HCI and UX.  They remind me that behind the fancy technology and flashy graphics the most important aspects of these disciplines are the people, the humans and the users, and what they want to do.  User experience must take into account the users needs, their existing work-flows, their expectations, needs, and wants into account.  How do we design a system that lets the user accomplish their task while making it easier, safer, and faster?  That’s the number one guiding principle behind AppliedUX.

On my next post I’ll gather some thoughts on user experience and agile practices.

Pages

Categories

Blogroll

Archives

RSS Syndication