Friday, January 20, 2012

Is it time to redesign?

A huge part of what makes any application intuitive is its interface. If it's well thought out, a user interface can make the difference between an app that is fun and easy to use and one that makes water boarding seem like a nice alternative. If the developer has taken the time to make sure the interface is not only self-consistent but consistent with other applications that provide similar functionality (when appropriate), it can add beauty to an application.

User interfaces don't age like fine wine. If an application's user interface is not updated from time to time, it's going to start making the app look old and out-dated. Additionally, if the application has a lot of features, its developers are likely to have learned quite a bit over the years about how people use the app. It's important to continually advance the usability of an application, this improves the productivity of its users and, in the case of commercial software, keeps the app competitive.

In some cases, incremental improvements can be made to a user interface. But sometimes the entire user interface needs to be redesigned. If you could do it over again, would you create the same user interface you have today? Though it may be a lot of work up front, a much improved user interface should be seriously considered throughout an application's life. Real Studio has gone through several user interface changes since version 1 and we are working on another big one right now.

Let's take a look at how the Real Studio user interface has evolved. Real Studio was first released on July 4, 1998 as REALbasic. The original release of Real Studio back in 1998, looked like this:

REALbasic 1.0



When Mac OS X was released, we updated the user interface to have an appropriate, native look and feel:





REALbasic 5.5 for Mac OS X

And when we brought it to Windows, we took care to make sure the UI felt native:

REALbasic 5.5 for Windows
Over the years we began to recognize that there were areas where we could really improve the user interface. One of the downsides to the original interface was that a user could easily end up with a lot of windows open. At the time, browsers also suffered from this same problem and to solve it the idea of using tabs to separate documents rather than windows was adopted. We also recognized that users spend a lot of their time navigating their projects, so anything to make navigation easier would be helpful. Lastly, we decided we should be eating our own dog food. The IDE was written in C++ and it really should be written in Real Studio itself. So in 2004 we began redesigning the user interface, rewriting in it Realbasic, to solve these and other problems. In mid-2005 we introduced the current Real Studio user interface:
Real Studio 2011

This current interface uses a single window rather than multiple windows. This makes it easier for the user to concentrate on the item they are editing, rather than spending time rearranging and scanning through windows that are layered on top of each other. This concept started on Windows and Linux but has been adopted more and more by Mac OS X applications as well.

The user interface you see above has served Real Studio users well for the past six years. In that time, however, we have learned a lot about how people use and learn to use Real Studio and we have taken note as interfaces have changed in the last six years. As a result, we are applying all of this to a significant redesign of Real Studio's user interface. Our goals are a cleaner user interface, easier navigation, better interactivity, a more intuitive user interface and a more modern look and feel. I'll be more specific about these goals for Real Studio:
  • Cleaner user interface - Every piece of text, control, line, and icon you present in a window is something the user believes they have to understand to use the product. Determining which items are infrequently used and removing them (possibly moving them to menus if they still do provide a needed function) can help make the interface cleaner. For example, the current user interface relies too much on text.
  • Easier to navigate - Real Studio users spend a lot of time moving from one part of a project to another. While the tabs help, they can also get in the way. The user has to constantly return to the project tab and double-click on a project item which then opens in its own tab. All of these tabs start to take up a lot of room in the tab bar and before long the user is spending time closing tabs to make room for new tabs! Search results only add to this issue because double-clicking on  result opens another tab. And while there's one way to navigate a project, there's a different way to navigate the code for the project. All of these ways of navigating present opportunities for improvement.
  • Better interactivity - A project can be filled with many different project items that need to interact with each other. The current user interface does not make this as easy as it could be. For example, to create a custom canvas subclass and use it on a window requires as many as six steps:
    1. Click Add Class in the Project Editor.
    2. Change the Super property of the new class to Canvas.
    3. Write your code.
    4. Switch to the Window Editor.
    5. Choose Project Controls from the Controls Selector popupmenu above the Controls list in the Window Editor.
    6. Drag your custom canvas subclass to the window.
    That's a lot of steps. It's also not easy for a new user to figure out these steps. Making basic tasks like this more simple and intuitive helps create better interactivity. And this not only makes it easier for a new user to learn; it makes the experienced user more productive.
  • More intuitive - An intuitive interface is one where the user can use the software, for the most part, without consulting the documentation. The key is to think of all the different ways users will try to use the software and anticipate them. The more often a user is successful when attempting a task, the more intuitive the software is. In the current version of Real Studio, there is usually only one way to do a particular task. In the new user interface, we are adding more ways to accomplish tasks to create a more intuitive design for more users.
  • Modern look and feel - Modern user interfaces are using higher resolution graphics, shadows, textures, animation and more. We are using many of these elements in the new user interface to modernize the look and feel.
It's been 2 years since we first began designing and implementing a greatly improved user interface to reach these goals. Because Real Studio has many editors, this has been an enormous task but we are very pleased with the results and I'm sure you will be too. 

Some people just don't like change and any significant change to a user interface will result in some of the existing users balking at these changes. There's just no getting around that. Though most of our users really appreciated the changes in the 2005 user interface refresh, there were a small number of users that just hated it. Apple changed the direction of gesture for scrolling in Mac OS X Lion; though it seemed like a huge change at first, it quickly became more intuitive to users. Technology moves fast and user interfaces need to keep pace. People will adjust quickly to well-thought-out changes and designers have to consider what the best user interface will be for the application moving forward. 

22 comments:

BobTheCodeBuilder said...

Good article, Geoff. I come from the Visual Studio environment for Windows apps. Any chance Real Software will be adding more controls to RS? The existing controls offer typical basic functionality, but lack features to make apps look more modern.

Jason said...

I'm really looking forward to the next UI. Honestly, I have no problem with much of the present UI, but one area I would really like to see improvement is the Window Editor. Instead of whining, I'll just make some suggestions. :)

1. Explicit layering would be great. For example, controls could be "grouped" to a single layer, then within that layer the controls would have sub-indexes. Say I may have six Text Fields in layer 3, and implicitly the controls are ordered 3.0 to 3.5. Move forward/back would adjust the sub levels, and a palette with the layers would allow me to move groups of controls at once.

2. Lock Controls/Layers. This is a big one. The smart guides get extremely annoying on a complex UI, and selecting an individual control or two (especially when stacked), can be very frustrating. I know locking currently exists, but it doesn't affect smart guides or selection.

3. Toggle smart-guides on/off. With the hopes of moving controls having a smoother, less jumpy feel.

4. Custom horizontal/vertical guides, set to either a percent or pixel position.

Well, that about does it. The truth is I'm very spoiled by Illustrator and Photoshop, but as a designer the two are visually similar to me. Hope these suggestions are helpful!

olivier said...

New user (WE), the current interface is pleasant. The disadvantage is its slowness (I use an fast iMac, with lots of ram). Moving objects is slow, we're wasting time.

Thom McGrath said...

Oliver, the IDE redesign fixes the speed issue.

michaeljk said...

Do you plan some sort of preview of the new UI (for beta testers) ?

olivier said...

ok, thank you Thom!

Geoff Perlman said...

@ BobTheCodeBuilder - Yes, we will be adding more controls and more features to existing controls. At the moment, we are focused on the redesign of the IDE and other things but we do plan to add more controls.

Geoff Perlman said...

@ Olivier - those are all great suggestions. Once the we release the IDE with the new design, give it a try then see how many of your suggestions still apply. If they do, let us know and they will look into them.

BobTheCodeBuilder said...

@Geoff - Are the IDE changes something we'll be seeing in the next release? I'm currently working on a project where I'm utilizing some screenshots of RS for help documentation, etc.

Geoff Perlman said...

@ BobTheCodeBuilder-Yes, these changes are scheduled for the next major release (2012r1).

Beatrix Willius said...

Where are the screenshots of the new IDE?

Some aspects of the existing IDE have been less than good. For instance the open projects dialog or the IDE edit screen as sheet. Will those be redesigned, too?

Paul Lefebvre said...

Relevant:

"Why we're building a whole new Basecamp":

http://www.inc.com/magazine/201202/jason-fried/starting-over-get-real.html

msa said...

Geoff,
I think you are missing a major point here but not once mentioning the less-than-stellar debugger in RS. I couldn't care less if it takes a whooping eight clicks to subclass and create a new class - I do that maybe once a day.
I spend many hours a day in the debugger and I would be extremely happy to have a working debugger showing me all values CORRECTLY (FB 12361, 9664, 12066) - Dictionaries anyone?, stepping through code and handling THREADS (FB 8907, , conditional breakpoints (FB 12922, 10534, 6310, 1358, 1095 - hey, why not merge these so the score improves...), show the stack in a correct way (FB 568, 7329), see a variable value easily (FB 13664) etc. etc.
I hope we will see a brand new useful debugger in the new UI if so you have my full support, if not I'd say that a new UI is like putting lipstick on a pig.

At the Frankfurt meeting you mentioned Xcode as a source of inspiration (due to connection problems we weren't able to see much of the demo). Please don't let this be true for the editing... Xcode has a excellent debugger, but the UI for editing is a complete disaster. A current project forces me spend two days/week in Xcode and the Assistant Editor is driving me nuts, file-handling is a mess, the tabbed interface is crash-prone and the Storyboard Editor just makes me want to scream.

Just my thoughts,
/Mattias

P.S OpenID as authentication does not seem to work on the blob (FF 9.01 on Mac) D.S

Bob Keeney said...

I have to agree with Mattias with usability. Some of the things your talking about make a lot of sense, but THE thing we need more out of the IDE is a better debugger.

The debugger hasn't had an overhaul in a long time and it's missing a lot of features that many of us could use TODAY even if the rest of the IDE was the same.

Geoff Perlman said...

The kinds of changes we would all like to see in the debugger require more than a UI change. They will require significant changes to the compiler itself. Those changes are ones we wish to make and will make eventually but they are far more significant than they would at first appear.

Peter Berglund said...

Ah what wonderful nostalgia to see a screenshot of RB 1.0. I started using RB with version 2 and in my mind the IDE never managed to gracefully transition to OS X. But it was still highly effective until the UI changed to the unified window. The tabs spawn so quickly that after a whole they are have truncated identical names (Windo..). This makes it more effective to open duplicate tabs than trying to find the one you're looking for. With the old IDE I would have 6-7 windows open. NOw I end up with at least a dozen anonymous tabs. The tab management is way more time consuming than the windows management ever was, and the displays those days were tiny. Today we have cinema display and Expose so i would like to see you go back to the UI that made RB so great.

jocallis said...

I look forward to these new changes. Anything that gets us closer to writing iOS apps, I am in full support of.

John
Clarity

Jedt3D said...

Geoff,

That's good to see what RS will be take care for IDE speed and usability.

I'd like to see a few improvement in code editor also.
- Code snippets, customized snippets like TextMate or BBEdit. Or even make RS use external code editors.
- Refactoring even basic refactoring. Eclipse and IntelliJ are very good at it.
- File browser/Object browser short key. Actually I'd like customizable shortcuts for all over RS if possible.
- More samples in RB language itself. Sometime it takes very long time to notice that in RB we can do something cool.
- Drop Linux support. Hate to say that, I love and use Linux in my business every days. But if this OS support is not worth, drop it and pure resources on IDE and features must be a better way. I don't know how many people use RS for linux though.
- Anybody say some kind of MVC or jQuery integration that make web developers more happy? ☺

We use RS make our utilities for our web dev works in our office. We love it but seems like RS should spread more like I wished. This era, Mac OS X is much more popular than 5 years ago. RS should be more adopted by developers who want to create Mac OS X apps.

Geoff Perlman said...

@ Jedt3D - great suggestions. Our first goal is to get the new UI shipping. It will lay a good foundation upon which we can build some of the things you have described. I can tell you that we are adding a lot more examples to the documentation. That's something we can do independently of the IDE.

Paul Lefebvre said...

@Jedt3D I will also add that you can already do some simple refactoring using the current IDE. Right-click on some selected code in the Code Editor a check out "Convert to Method", "Convert to Constant".

And if you right-click on a Property, you can see "Convert to Computed Property" and "Convert to Shared".

LORDAGE said...

Hi,

I would like some feedback if the redesign and all new features and controls will be available for Real Studio Web Edition too?

The segment business for web applications is taking a lot of importance and is necessary a tool with much functions and controls.

Thank's in advance for your comments.

Geoff Perlman said...

@ Lordage - We only have one IDE so the improves in it will be for both desktop and web apps. Of course the GUI frameworks for the desktop and web are different so they don't share all the same controls but the IDE itself is shared completely.