Interface Design on MS Surface and other systems

Cool Interface Toys

2009-12-14T22:59:00.002-05:00

Now that the price of technology has become so much more affordable, several toys now incorporate sophisticated electronics and computing systems. A few weeks ago, I ran across this demonstration. While it is not cheap or marketable yet, there are a number of very cool, fun, practical, and educational uses for these "Siftables"

The interaction with the blocks is extremely simple, even if only a few instructions are used. Little kids were able to use the blocks for simple learning games and adults (with a little more practice) could become proficient at the sound mixing. The word matching is entirely intuitive and registers with our natural inclinations immediately.

Surface D&D and other Board Games - "Enhanced"

2009-11-24T01:58:00.002-05:00

This is a reference to Rob Wettach's October 26th blog on Surface D&D:

This is something that I discovered myself when I looked into some ideas for my final project. I was never a D&D player myself, but this Surface controlled environment would make it easy to play and learn the game.
When I first saw this demonstration, I thought about the number of other board games that would be great to play on a Surface. Classics like Monopoly would be easy to pick up on a Surface. You could still roll dice and move your piece if you wanted to, or have the computer move your player for you while you manage your assets and discuss property trades.

I also considered playing a much more complex game like Axis & Allies or Risk. A game like these would really benefit from limiting the physical pieces on the board that can easily be lost or knocked over (which subsequently ruins the game). In addition, these games can take hours to finish, so it would be nice to save the game and come back later. While coding the rules to the games would take up LOTS of time, it would keep opponents from forgetting the rules or cheating.

Of course the strict rule enforcement might be the game's downfall as well. "House" rules would need to be programmed into the code to allow for game adjustments like collecting money on the "Free Parking" square of Monopoly.

XAML Triggers

2009-11-04T14:56:00.006-05:00

There are three types of triggers in WPF: Property, Data and Event.
A property trigger is invoked when the value of a dependency property changes.
A data trigger is invoked when the value of a .NET property changes.
An event trigger is invoked when a routed event is raised.

Here is an example of a property based trigger:
<Style TargetType="{x:Type Button}" key="TriggerStyle">
  <Style.Triggers>
   <Trigger Property="IsMouseOver" value="True">
      <Setter Property="Background" Value="Green">
    </Trigger>
  </Style.Triggers>
</Style>

Here is an example of an event based trigger:
<Button Name="btn_OK" Click="btnOK_Click">OK</Button>

Update

2009-10-12T15:09:00.003-04:00

I finally seem to recall that I should also be posting updates on how the class is going in addition to my thoughts about various interfaces. We have finished a few simple homework assignments, a project, and part of a second project. The homeworks have mostly focused on using Windows Presentation Foundation. We've covered the basics of XAML and building basic backend C# code to interact with the UI elements.

The first project tracked the movement of a WiiMote by recording accelerometer values. We extracted the readings into Excel to visualize the results of different movements. We weren't required to do much else, but we became much more familiar with the WiiMote library and how to get the information we need out of the devices. I also realized how difficult it is to have the program "recognize" certain motions, like a throw. It is easy enough to tell that the controller is moving quickly, but it's certainly not easy to tell how it is being thrown (overhand, sidearm, twisted, etc).

The second project is a stroke-rehabilitation program that allows a doctor and patient to see how well the patient is able to maintain balance while getting up from a sitting position or simply maintaining a standing position. We use the Wii Balance Board to determine the patients center of gravity. We are designing an intuitive and appealing way to view the information during the test as well as a way to record the test for later review.

Mouse 2.0

2009-10-05T15:10:00.002-04:00

Today, Microsoft unveiled their latest research mice. These new mice are intended to be used in the now-popular multi-touch world supported by phones, tablets, Surface and Windows 7. Many of these mice use cameras, like the surface, to detect finger motions on the exterior of the mouse.

Last week I argued that the standard keyboard couldn't be changed because it has been a standard for so long. While the mouse is much younger, it too has remained the same for some time. Additions like extra buttons have made the mouse more versatile and tilt-scroll wheels made certain tasks much easier. It is annoying now to have to scroll through a webpage or PDF using the actual scrollbar now that we are so used to the wheel on the mouse. Is it reasonable to believe that resizing windows using a multi-touch mouse rather than dragging the corner of a window will become the new standard?

I think it is. Yes, even after arguing that the keyboard will never change, I think that the mouse can evolve. Multi-touch devices can be designed to track very intuitive inputs. The two-finger resize gesture utilized by the iPhone and Surface simple make sense. Dragging windows with a solid click versus flicking a photo across the screen are motions that we can perform with paper on a desk, so they translate well to multi-touch computing applications.

The first mouse in the video looked promising for a general audience while some of the others looked like they could be used in niche markets. The "artsy" mouse would be great for 3-D modelers so they can "grab" and twist their designs. The side mouse looks like it could be used to complement a standard mouse when using special applications like photo editing software.It will be interesting to see which of these mice make it beyond the development stages.

Physical Interfaces

2009-09-28T13:31:00.000-04:00

The main focus of this course has been on system interfaces with respect to how the software is presented or on "new" technologies like touchscreens or motion tracking. I also think that the design of a complete system includes the physical devices used as input. In my last post, I discussed how the mouse radically changed the computer world. The keyboard, on the other hand, has been around as long as processors themselves and haven't changed much. This is exactly why it is so important not to try to change the keyboard layout.

I looked into the evolution of keyboards and the majority of them look almost identical. The Ctrl, Alt and proprietary keys (Windows, Option, etc) are the only ones that seem to move. The biggest shift seems to be the release of the IBM 101-key "Enhanced" keyboard in 1986. This keyboard moved the CapsLock next to the A, swapping it with the Ctrl key, and moved the function keys to a new row above the number keys. It became the standard for all common computers and is still used to this day, despite research showing that other layouts, such as the Dvorak layout, are faster and more accurate.

Once typists and casual users learned the specific layout of the 101-key design, they became accustomed to it to the point that any other keyboard would require a complete re-learning. Even if one decided to learn the Dvorak layout, they would still be forced to use QWERTY present on nearly every other machine they used.

The main point is that at this point in history, it would be nearly impossible to replace or redesign the keyboard. When we design interfaces, it is critical to evaluate how old systems worked and how willing users would be to change to a new design.

The Old Macintosh

2009-09-21T16:34:00.000-04:00

I was browsing my Instant Netflix queue the other day when I came across a documentary titled "Welcome to Macintosh". I watched to movie keeping the objectives and concepts of system interface design at the forefront of my mind.

I knew that the development of a GUI was a huge step in the technology world, but I never realized how long it took and how novel the concept was. The movie featured interviews from several long-serving or Apple employees that shared the process of developing many of the technologies that went into the major systems such as the Apple II, Macintosh, iMac and iPod/iPhone.

After the success of the Apple II, a small team of about a dozen designed the first Macintosh, the first GUI and the first successful point and click environment. Most of the original artwork was done on graph paper that could easily be translated into bitmaps because the team could not afford to build a prototype for each contributer. The text editor was capable of several different fonts of different sizes.

Today GUIs and point-and-click have evolved, but many of the principles remain the same. We still use images of folders and disks to give a metaphorical representation of file systems. We still use windows to manage viewing different applications. One clip in the movie reference an IBM quote saying, "No computer that can fit on a desk could ever be powerful enough to do worthwhile computing." The Macintosh didn't have the speed or memory of a contemporary IBM mainframe, but certainly left a much greater impact on the world.

2009-09-14T11:04:00.000-04:00

I think that it is more important to focus on interface design than it is to focus on the “smarts” of a system. If users are able to look at and interface and understand how to use it properly, then smarts are not required. With a well designed interface, users typically have more options, especially advanced options. One example of an easy interface but little AI is the automated checkout system in supermarkets.

Another example of an intuitive interface without much smarts is the Apple iPod. Spinning my finger around the wheel is an easy motion that relates well to what I am trying to do. I spin clockwise to turn up the volume. Click the middle button to select a menu item. Easily scroll up and down through menus. Skip songs by pressing forward. My old MP3 player (the original Nomad Jukebox) had several more buttons with specific tasks. The iPod consolidated the buttons to just the scroll wheel. This is a huge advantage because I can control the player with one hand while walking or doing some other task.

This opinion does, of course, come from an engineering-oriented individual. I enjoy experimenting with new technologies and learn from trying things out on my own. Other people who might not be so tech savvy can often be deterred by the newest advancements. This is where some would argue the system intelligence would be able to figure out what they are trying to do. I would argue that unless the system has an approachable interface, the new users would never try the system to start with.

Minority Report Interface via Wiimote

2009-09-06T14:13:00.000-04:00

This week we will be working on an introduction to using and tracking the movement of the Wiimote. We will measure and analyze the accelerometer readings from a variety of hand motions. I looked into some other interesting uses for the remote and found this video that demonstrates one potential use.

Essentially, the Wiimote is serving as an infra-red camera (none of the accelerometer features are being used) to detect the reflection of infra-red off of fingers or reflective tape. Using the common Bluetooth protocol, it is easy to have the Wiimote communicate with a variety of devices, like the PC in the demo. Johnny easily moves, twists, and zooms a simple image around the screen using intuitive hand motions. He does mention that continually moving hands around in the air, while fun, does wear the user out.

Due to the physical demands this type of interface requires, I thought of two good uses. The first would be in a demonstration environment. Sales people at trade shows could interactively move computer models of their products rather than show a pre-rendered animation. If a customer wanted to see a specific angle, the sales person would spin the product to that angle and adjust the zoom. The second practical use would be physical therapy. Patients would be instructed to move their arms around to "touch" objects on the screen. The level of therapy would be easy to adjust based on each patient's needs. Doctors could design sequences that would target specific joint movements by placing objects in patterns that would intuitively lead to a wrist twist, elbow bend or shoulder stretch.

Welcome

2009-08-27T19:59:00.001-04:00

I am writing this blog to introduce, demonstrate, and explain some of my work that I developed during the System Interface Design course. We will be working with the Wii remote, Xbox 360, and most significantly, the Microsoft Surface computer.