A couple years ago the Windows Phone design team realized that the design path that Windows Mobile was on was not sustainable and decided start afresh.

When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface. Sources included Swiss influenced print and packaging with its emphasis on simplicity, way-finding graphics found in transportation hubs and other Microsoft software such as Zune, Office Labs and games with a strong focus on motion and content over chrome. ^[1]

Metro is the name of the new design language originally created for the Windows Phone 7 interface and now also used for the Xbox 360 Dashboard and Windows 8.

Guiding Principles of the Metro Design Language

There a few core concepts of the Metro design language which we’ll outline here. Each concept, or guiding principle, contributes to the look and feel of the whole system as well as the layout and frequency of elements used within the interface. These principles govern not only Microsoft’s own Metro apps, but should govern applications that independent developers create as well. ^[2]

Clean, Light, Open and Fast

Unlike previous incarnations of the Windows interface where stuffing everything on one screen and making maximum use of your screen real estate was considered a good thing, Microsoft’s new direction is that interfaces should be very simple and have a good deal of white space. Focus the user on the primary tasks and reduce clutter. This makes the UI feel smart, open, fast, and responsive. ^[3]

Live tiles are a great example of simplicity. The screenshot above of the new metrofied Xbox 360 dashboard could be on a tablet and you wouldn’t know the difference because it’s so simple it can scale to different form factors. ^[4]

Celebrate Typography

Type is information, type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

Alive in Motion

Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, navigation, extra dimension and depth and improves the perceived performance of the whole interface.

The best Metro experiences are the ones that are alive and colorful while at the same time emphasize typography and simplicity.

Content, Not Chrome

Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to direct interaction with the content.

Authentically Digital

Sometimes, this principle is simply called “honesty”. Design explicitly for the form factor. Don’t hold the user to real-world limitations or waste space on design elements that don’t relate to the function you are looking to accomplish.

References

[1] From Transportation to Pixels: The story of Metro
[2] Metro Design Language of Windows Phone 7
[3] Metro Design Principles for Windows Phone, Windows 8 & Xbox 360
[4] When Metro design falls off the tracks – The three pillars of Metro

• UI Platforms: Which One Would You Pick?
• The Story of the Office Ribbon
• How to Create Attractive, User Friendly Applications?
• Designing the ULTIMATE Twitter Client
• SharedMinds Desktop – Quickstart

In this article I like to share my mental model about UI / UX development. It is all about creating attractive, user friendly applications. But in order to do this you need to understand attraction in the first place.

What is Attraction?

Studies have shown that almost 50 percent of all women make up their mind within the first 30 seconds of meeting a man about whether he is a potential partner. Men take a little longer. Men take about half an hour on average to make up their mind.

The first impression is influence by your outward appearances like the way you look and dress, your body language and how you communicate inner values like confidence, self esteem and humor.

Although those qualities can be categorized in a kind of “outer game” and “inner game” they are not independent of each other. For example self-confidence will reflect in the way you carry yourself and the tone of your voice.

If you found this paragraph interesting I also recommend watching Andy Budd excellent talk about Seductive Design.

The Outer Game and Inner Game of UI Development

In a similar way as in interpersonal relationships we can identify an “outer game” and “inner game” that make up an attractive, user friendly application:

• The “outer game” is defined by the whole User Experience of the application. The user experience itself can divided into two main areas namely Usability Engineering and Visual & Interaction Design.
• The “inner game” is defined by the technology related “inner workings” of the application. This can be further divided into Software Architecture and UI Technology.

Like in interpersonal relationships the “outer game” and “inner game” of UI development are not independent of each other. For example if an application does not work reliable it does not matter how appealing the visual design is.

Usability Engineering

This is where it normally starts after having a broad understanding of the requirements.

According to “usability guru” Jakob Nielsen usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

However it is often very complex and time consuming to make something simple and easy to use. I love the following quote which summarizes this situation very well:

This means to simplify something you need to put a lot of effort into it:

Just throwing the latest & coolest technology at the problem will not necessarily get the job done. Usability engineering is a way to find out how to best support people in getting their job done. This includes activities like:

• Understanding the user needs and use cases
• Interviews with potential end users
• Describing use cases, user roles & tasks
• Developing a role model
• Paper prototyping, creating concept screens & mockups
• Performing usability tests

At this stage it is also a good practice to look at suitable design patterns and to get inspiration on how other’s are solving similar problems. The result is a detailed usability concept of the screen layout, navigation and workflow description for each user role and task.

Software Architecture

Many modern software applications are designed with modularity and extensibility in mind and support their own plug-in system.

An application is composed of pluggable components called modules or plug-ins. The shell is the actual application that is responsible for loading and initializing base client services, loading and initializing modules, and providing the basic UI of the application. It also provides the overall user interface structure and defines the layout of the main window, navigation controls and workspaces.

Modules or plug-ins are distinct deployment units. Typically they contain functionally discrete pieces, but they integrate with the user interface, communicate with the shell, and communicate with each other. The shell and infrastructure provide access to services required by modules throughout the application. This means that the modules can leverage these capabilities instead of having to implement them themselves. This allows a solution to be developed much more quickly because the infrastructure is already in place – the modules can focus on the business logic and their piece of the overall solution instead of focusing on the basic foundation required to provide the necessary capabilities.

This approach enables the separation of concerns between infrastructure and module development.

UI Technology

Today the possibilities to develop rich user experiences are amazing! However it can be quite a challenge to choose the right technology for the task at hand. There are just so many options out there.

With technologies like HTML 5, Flex, JavaFX, Silverlight and WPF the borders between rich desktop applications and rich Internet applications are blurring more and more. Apple, Adobe, Microsoft, Google and Sun are competing head to head to attract as many developers and users as possible. They all provide their own technologies and runtime environments. To get an overview about the technology offerings of those big players read the following article: UI Platforms: Which One Would You Pick?

Visual & Interaction Design

The importance of design changed over time. Visual design nowadays is a critical success factor. The area of Visual & Interaction Design includes activities like:

• The creation of Visual Design Prototypes
• The definition of Design Guidelines
• Designing the visual appearance of the UI
• Interaction Design
• Icon Design
• Branding Considerations

Because visual design is a central part in the development process it is very important the collaboration between designers and developers is a smooth one.

How to Measure the Attractiveness of Your Application?

AttrakDiff is a survey technique that enables you to measure how the attractiveness of your application is experienced, in terms of usability and appearance and whether optimization is necessary.

The survey consists of numerous word-pairs which simplify the rating procedure. Each word of a pair represents the extreme opposite. There are other possible gradations to choose from between the two extremes.

An example of a word-pair is illustrated here:

This rating means that the product is essentially likable but that there is still room for improvement.

Read more about the AttrakDiff survey technique here.

• UI Platforms: Which One Would You Pick?
• The Story of the Office Ribbon
• The Metro Design Language
• Seadragon / Deep Zoom Technology
• Live Labs Pivot: A great way to visualize massive amounts of data

The bSix12 Explorer allows you to browse through all available articles on this site in a way that is powerful, informative & fun. You can filter and sort the articles by category, tag or date.

Read more about it here or try the live version here.

In this post I’ll describe how it was created.

The bSix12 Explorer is based on the Live Labs Pivot technology. Read more about Live Labs Pivot here.

The Pivot Viewer control request the Pivot collection from the Server. Pivot collections are composed of two parts:

• XML – The items in the collection are described in XML, in a ".cxml" file
• Images – The images in the collection are described in Deep Zoom format.

The Pivot collection is dynamically generated by a Web Role hosted on Windows Azure. In order to do this I am building on top of the Just in Time Pivot Collection Sample provided by Live Labs.

To get the list of current blog post I am using the Joe Blogs library.

The screenshots are dynamically generated by an Azure Worker Role and stored inside an Azure Blob Storage account.

If you like to do something similar and need more details or like to see some code just give me a shout.

• bSix12 Explorer: Navigate in a way that is powerful, informative & fun
• UI Platforms: Which One Would You Pick?
• The World’s First Computer Bug!
• The Story of the Office Ribbon
• The Metro Design Language

Pivot is a new technology developed by Microsoft Live Labs that makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun.

Pivot is designed to provide a much more natural way for humans to digest large amounts of information without losing their way — an idea that anyone who has analyzed giant spreadsheets may welcome.

At the heart of Pivot are "Collections." They combine large groups of similar items, so you can begin viewing the relationships between individual pieces of information in a new way. By visualizing hidden patterns, Pivot enables you to discover new insights while interacting with thousands of things at once.

In the following presentation Gary Flake demos Pivot. This will give you a pretty good idea what this technology is about:

Pivot’s most compelling feature is its ability to smoothly and quickly arrange collections according to common characteristics and then zoom in for a closer look, by either clicking on a particular item or filtering the collection to get a subset of information.

“We found that if you make it a sudden transition, people lose their way… but if you make it very smooth and continuous, people have a mental model of how they got to where they are.”

- Gary Flake

“With Pivot you can swim through the data, taking little twists and turns,” Flake says. “If you are looking at all the information at once, the proverbial forest, you can click on any one item or filter and smoothly zoom into the trees without any interruption.”

Because Pivot works with almost any kind of data, its potential uses are practically infinite. The key elements to designing a great Pivot collection are relatively simple: pick a subject matter with great images and interesting details, choose a small number of properties to filter on, and add links to related content.

The image content for a Pivot collection consists of a Deep Zoom Collection of individual Deep Zoom images, all based on Microsoft Seadragon technology.

Live Examples & Demos

Live Labs now also provides a Silverlight Pivot Viewer. This makes it possible to integrate Pivot into your own site and visualize Pivot collections without installation any additionally software (except the Silverlight plug-in). Here are some examples:

bSix12 – Explorer:

This site provides a Pivot view to explore all available blog posts. You can slice and sort the content by category, tag or date. Try the live version here.

Hitched Wedding Locations:

Hitched is a UK based wedding site that has thousands of wedding venues in the country. It now enables visitors to quickly browse and filter locations using PivotViewer.

Browse the site and give it a try.

Netflix Movie Collection:

It provides a nice example of how you can use PivotViewer to navigate a large set of information quickly and easily. You can use it to easily find and sort through all your favorite movies, and then navigate directly to the page on Netflix. Try it here.

If you like to create your own Pivot Collection read the developer documentation.

• bSix12 Explorer: Navigate in a way that is powerful, informative & fun
• Seadragon / Deep Zoom Technology
• What is Intelligence?
• UI Platforms: Which One Would You Pick?
• Project Natal

I am very exited to introduce the new bSix12 Explorer!

The bSix12 Explorer allows you to browse through all available articles on this site in a way that is powerful, informative & fun. You can filter and sort the articles by category, tag or date.

Click on the Explore menu in the main navigation to get started.

Note: This feature is based on Silverlight. If you haven’t installed the Silverlight browser plug-in yet you need to install it first.

Use the mouse wheel or click on an article or graph view column to zoom in. Once you focused on a single article the info pane will be shown on the right. From here you can navigate further by using the navigation controls or by clicking on a link in the info pane. To read an article click top right hotspot of the article preview.

Try the live version here.

• Live Labs Pivot: A great way to visualize massive amounts of data
• Seadragon / Deep Zoom Technology
• What is Intelligence?
• UI Platforms: Which One Would You Pick?
• Story Power! Tools to Create Engaging Content

Deep Zoom (aka Seadragon) provides the ability to interactively view high-resolution images.

You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables smooth loading and panning by serving up multi-resolution images and using spring animations.

In the following presentation Blaise Aguera y Arcas demos the Deep Zoom & Photosynth. This will give you a pretty good idea what this technology is about:

…the only thing that ought to limit the performance of a system like this one is the number of pixels on your screen at any given moment.

The Image Pyramid

Deep Zoom, or for that matter any other similar technology such as Zoomorama, Zoomify, Google Maps etc. uses something called an image pyramid. It allows the rendering engine to pick and choose only the data that is required for a particular view. Each level is significantly smaller than the next, and is loaded as soon as it becomes available. The smooth experience is created by progressively loading each new resolution level and seamlessly blending between them. The following illustration below shows what the image pyramid looks like conceptually:

At each level of the pyramid, the image is scaled down by 4 (a factor of 2 in each dimension). Also, the image is tiled up into 256×256 tiles by default. If you zoom in to a specific area of a large image, then only those tiles needed to show the specific areas are downloaded.

After creating your own Deep Zoom Image, you end up with a folder structure that mimics the levels of the pyramid along with metadata:

The folder structure and metadata can be created programmatically or by a tool like DeepZoom Composer.

To get more details about the image pyramid and the Deep Zoom file format refer to the following articles:

• Seadragon Developer: Creating Content
• Inside Deep Zoom – Part I: Multiscale Imaging
• Inside Deep Zoom – Part II: Mathematical Analysis
• Deep Zoom File Format Overview

Deep Zoom Collections

A collection is made up of multiple images. Deep Zoom optimizes working with a collection of images by enabling lower levels of multiple images to share tiles which, reduces network traffic and render hundreds of high-resolution images at once.

For example, Deep Zoom can load and decode only one tile, and retrieve the thumbnails for a hundred images in one operation.

The following illustration shows how thumbnails are stored at various levels of detail.

Toward the top of the pyramid, all the images are packed into a single tile. In the middle of the pyramid, images share tiles, but multiple tiles may be needed to contain all the images. At the bottom of the pyramid, there is usually one image per tile.

With Deep Zoom Collections you are able to programmatically move individual multi-resolution images around the screen or filter your images. This leads to interesting applications like Live Labs Pivot.

For more detail, check out A Deep Zoom Blog: Deep Zoom Collections Explained.

Scenarios & Applications

Deep Zoom can be used in many different areas. A classic example is zooming in on parts of a large map to see different levels of detail and then, using the mouse, moving your view around the map surface. As the user moves their view, animations are used to give the user the impression that they are "moving" from one place to the other on the image.

Bing Maps is build on Deep Zoom technology. In the following TED presentation Blaise Aguera y Arcas demos augmented-reality maps powered by Deep Zoom & Photosynth technology.

The version Blaise Aguera y Arcas demoed in this presentation is now live. Go check it out here.

Another example is exploring a professional photo composition made up of high-resolution pictures. The Mona Lisa Deep Zoom Composition featured on this blog falls into this category. Also see the deep zoom art project from Kunsthaus Zürich. It is featuring 8 paintings from Van Gogh, Cézanne and Monet. Combined the deep zoom images have a resolution of over 4 Gigapixel.

Deep Zoom technology is used in Photosynth. Photosynth allows you to take a bunch of photos of the same scene or object and automatically stitch them all together into one big interactive 3D viewing experience that you can share with anyone on the web.

Live Labs Pivot is a new technology developed by Microsoft Live Labs that makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun. The image content for a Pivot collection consists of a Deep Zoom Collection of individual Deep Zoom images. The Hard Rock Memorabilia site was the first popular site that provided a “Pivot like” experience by using Deep Zoom Collections.

This site provides a Pivot view to explore all available blog posts. You can slice and sort the content by category, tag or date. Try the live version here.

• Live Labs Pivot: A great way to visualize massive amounts of data
• bSix12 Explorer: Navigate in a way that is powerful, informative & fun
• UI Platforms: Which One Would You Pick?
• Project Natal
• How to Create Attractive, User Friendly Applications?

Recently I attended a presentation by Alistair Cockburn. He is one of the initiators of the agile movement in software development and one of the 17 authors of the Agile Manifesto. During his presentation he introduced the Japanese martial arts concept of Shuhari and it’s applicability to the learning process in general and the mastery of development processes in particular.

The Stages of Learning to Mastery

People learn skills in a 3-stage progression: Shu / Ha / Ri

1	2	3
Shu: Follow Learn a technique	Ha: Break away Collect techniques	Ri: Fluent Blend techniques

From Agile Software Development first edition, 2001:

People who are learning and mastering new skills pass through three quite different stages of behavior: following, detaching, and fluent.

People in the following stage look for one procedure that works. Even if ten procedures could work, they can’t learn ten at once. They need one to learn first, one that works. They copy it; they learn it. In this stage, practitioners measure success by (a) whether the procedure works and (b) how well they can carry out the procedure.

In the detaching, or Level 2, stage, people locate the limitations of the single procedure and look for rules about when the procedure breaks down. They are actually in the first stage of a new learning; namely, learning the limits of the procedure. The person in the detaching stage learns to adapt the procedure to varying circumstances. She is now more interested in learning the ten alternative procedures, in learning when each is most applicable and when each breaks down.

In the third, fluent stage, it becomes irrelevant to the practitioner whether she is following any particular technique or not. Her knowledge has become integrated throughout a thousand thoughts and actions. Ask her if she is following a particular procedure, and she is likely to shrug her shoulders: It doesn’t matter to her whether she is following a procedure, improvising around one, or making up a new one. She understands the desired end effect and simply makes her way to that end.

In other words a Shu person knows exactly one technique and will stick to it whether it is appropriate to solve the particular problem or not. Only a few persons will break away and learn other techniques and eventually become Ri persons. A Ri person has developed a large repertoire of techniques and applies the best possible techniques to solve the problem at hand.

• Where Good Ideas Come From
• UI Platforms: Which One Would You Pick?
• The Khan Academy
• Seadragon / Deep Zoom Technology
• Live Labs Pivot: A great way to visualize massive amounts of data

With SharedMinds Desktop you can browse though all your tweets quickly and show links, user profiles and twitter search results right there in the same application. This will make you more productive and enhance your Twitter experience.

 Download now – It’s free

Open Gallery | Slide Show

SharedMinds Desktop has unique features like a powerful view engine, an integrated web viewer and flexible sorting and filtering. It supports twitter search, conversations, twitter lists, multiple accounts, multi-select, easy retweeting, URL shortening, image sharing, a single inbox and has a small memory footprint. It is a native Windows application and supports many different visual styles. For further information see the quick start guide.

 Download now – It’s free

• SharedMinds Desktop – Quickstart
• Designing the ULTIMATE Twitter Client
• What Everybody Ought to Know About Twitter?
• UI Platforms: Which One Would You Pick?
• The World’s First Computer Bug!

You may love or hate the new Office Ribbon user interface. Microsoft was very brave to dramatically change the user interface for Word, Excel, PowerPoint and Co. It means that more than half a billion people need to learn the new interface. That’s a huge impact – and not everybody is happy about that. However from a usability point of view it is amazing how much research, prototyping and usability testing went into the redesign of the Office 2007 user interface. The main goal was to drastically improve the productivity of the end user.

At Microsoft’s MIX08, Jensen Harris from the Office 2007 design team told the behind-the-scenes story of how the 2007 Office Ribbon user interface was imagined, designed, and validated.  He showed never-before-shown early prototypes and talked about mistakes and lessons learned during the design process.

This presentation is a must see for anybody interested in user experience design. The MIX08 presentation is available here.

• UI Platforms: Which One Would You Pick?
• The Metro Design Language
• How to Create Attractive, User Friendly Applications?
• Designing the ULTIMATE Twitter Client
• SharedMinds Desktop – Quickstart

If you are new to Twitter or if you do not have an account yet read the following article to get started:

• How to Use Twitter

By now you should have a basic understanding of Twitter and a valid account.

Go to Tools/Accounts and add your Twitter accounts. You can add as many accounts as you like. By default the first account you add will become your default account. You can change this later. For the default account you can select whether you like to automatically login to the twitter.com on startup.

Note: In order to use Twitter Search or to watch the Public Timeline you do not need a Twitter account. You can use those features right away.

a) Main Menu / Toolbar

The main menu can be used to show / hide the navigation pane, status bar, toolbar and to change the visual style of the application. The option dialog and the account manager is accessible via the Tools menu. The About Box and links to helpful resources can be reached via the Help menu.

The toolbar can be used to show / hide the Tweet Pane and Twitter Search Pane. The toolbar is context sensitive and allows interacting with Tweet commands like Reply, Retweet etc.

b) Tweet Pane

It is possible to select one account or multiple accounts for “cross account tweeting”. Spell checking support is provided (currently English only). Click on “Shorten URLs” to shorten the Tweet URLs all at once.

c) Navigation

Use the navigation pane to … well … to navigate! The navigation pane can be turned off or switched to auto hide mode via the pin button.

d) Preview Pane Mode

Use this toolbar to switch between the different preview pane modes of the current view. You can select one of the following modes: Right, Bottom and Off.

e) Account Filter

If you have multiple accounts configured you can select if you like to see Tweets from all accounts or from a specific account only.

f) Different Views

You can view Tweets in different ways: Default, By Date, By Sender, Tweet View, List View and Photo List.

g) Tweet Rendering

URLs, #hashtags and usernames are rendered as clickable hyperlinks.

h, i) Tweet Details Pane

The tweet details pane can be either shown on the right, bottom or it can be turned off. For each URL, #hashtag and username a tab will be added  automatically and the referenced web page, picture, video, twitter search or user profile is just one click away and can be viewed right there. Pretty cool!

j) Status Bar

The status bar shows useful context sensitive information like how many request are remaining for a particular user.

k) Twitter Search

Use the easy to use search editor to construct your Twitter search queries. New search queries can be saved and existing ones can be modified.

l) Organize Searches

After saving your search query it will get a default name and appear as a new node under the search folder.

m) Grouping & Filtering

By selecting List View or Photo List you will be able to customize the view in different ways: apply groupings, filters and choose the columns you like to display. For example it is possible to choose from a number of different columns: Name, Text, Date, Bio, Friends Count, Followers Count etc.

For more SharedMinds Desktop screenshots go and visit the Screenshot Gallery:

Open Gallery | Slide Show

Download the latest version at http://bSix12.com/smd.

For updates you can follow @SharedMinds or @RainerFalle.

• Designing the ULTIMATE Twitter Client
• SharedMinds Desktop – The Ultimate Twitter Client for Windows
• UI Platforms: Which One Would You Pick?
• The Story of the Office Ribbon
• The Metro Design Language

I am working on a Twitter Client right now. But I am not working on some Twitter Client – I am working on the ULTIMATE Twitter Client! Right? Well sort of… however we need to define what “ULTIMATE” means in this context ;-) Ask a thousand people and you will probably get thousands different answers. For example here is Guy Kawasaki’s wish list – which by the way is pretty good!

So let’s rephrase this: I am designing the ultimate Twitter Client for Windows which first and foremost I would like to use. And it depends on how far I can push it as a spare time project…  Anyway here is the concept:

The main goal for the application called SharedMinds Desktop is to integrate different communication and productivity tools. It will be designed with extensibility in mind and in future come with it’s own plug-in system. However the focus of the first version will be about Twitter integration only:

a) Main Menu

The main menu can be used to show / hide the Tweet view and Twitter Search. It allows interacting with Tweet commands like Reply, Retweet etc.

b) Tweet View

It should be possible to select one account or multiple accounts for “cross account tweeting”. I somehow can’t write without spell checking anymore… So spell checking support will be there right from the beginning! Clicking on “Shorten URLs” will shorten the Tweet URLs all at once.

c) Navigation

Use the navigation pane to … well … to navigate!

d) Account Filter

If you have multiple accounts configured you can select if you like to see Tweets from all accounts or from a specific account only.

e) Different Views

You can view Tweets in different ways: Tweet View, List View, Photo List etc.

f) Tweet Rendering

URLs, #hashtags and usernames should be rendered as clickable hyperlinks.

g) Sorting and Filtering

It should be possible to sort and filter by all visible columns.

h, i) Tweet Preview Pane

The tweet preview pane can be either shown on the right, bottom or it can be turned off. For each URL, #hashtag and username a tab will be added  automaticcally and the referenced web page, picture, video, twitter search or user profile is just one click away and can be viewed right there. Pretty cool!

j) Twitter Search

Use the easy to use search editor to construct your Twitter search queries. New search queries can be saved and existing ones can be modified.

k) Organize Searches

After saving your search query it will get a default name and appear as a new node under the search folder. From there you can rename it, change it’s icon or put it into a category folder of your choice.

l, m) List View, Photo List

Twitter Search can be used even without a Twitter account. So there is no account filter for twitter searches.

By selecting List View or Photo List you will be able to customize the view in different ways: apply groupings, filters and choose the columns you like to display. For example it will be possible to choose from a number of different columns: Name, Text, Date, Bio, Friends Count, Followers Count etc.

n) see above.

That’s pretty much it. I hope I can provide a first preview with some of those features in a couple of weeks. You can follow me on Twitter for updates: http://twitter.com/RainerFalle

How does your Ultimate Twitter Client look like? Which features would you like to see?

• SharedMinds Desktop – Quickstart
• UI Platforms: Which One Would You Pick?
• The Story of the Office Ribbon
• The Metro Design Language
• SharedMinds Desktop – The Ultimate Twitter Client for Windows

With technologies like Ajax, Flex, JavaFX, Silverlight and WPF the borders between rich desktop applications and rich Internet applications are blurring more and more.

Today the possibilities to develop rich user experiences are amazing! However it can be quite a challenge to choose the right technology for the task at hand. There are just so many options out there.

Adobe, Microsoft, Google and Sun are competing head to head to attract as many developers and users as possible. They all bring in their own technologies and runtime environments. In the following I like to give a brief overview about the technology offerings of the four big players:

Adobe

Adobe’s runtime environment is called AIR (Adobe Integrated Runtime). AIR is a cross-platform runtime environment for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax, that can be deployed as a desktop application.

AIR applications are running outside of the browser security sandbox, they can run offline and they can make use of local storage and file systems. Currently the most popular AIR applications are Twitter clients like TweetDeck and Seesmic Desktop.

Microsoft

With the .NET Framework, Winforms, WPF and Silverlight – Microsoft offers two runtimes and different technologies for building rich user experiences.

Winforms and WPF are the choices for building Windows desktop applications.

Silverlight is a subset of the .NET / WPF runtime distributed as a cross browser / cross platform (Windows / Mac) browser plug-in. Moonlight – a Linux version of Silverlight – is provided by the Mono project (supported by Novell).

Since Silverlight 3 applications can run outside the browser in their own application window. However they still run in the context of a security sandbox. This is the main difference to WPF or AIR.

Microsoft Patterns and Practices group offers very good starter kits and guidance’s for building composite applications. The Smart Client Software Factory (SCSF)  is the choice for building composite applications based on the Winforms technology. Prism is the Composite Application Guidance for WPF and Silverlight. Specially for Silverlight there are benefits to modularize the applications to reduce the initial download time. Prism supports loading modules on demand which can be very useful in this scenario.

Google

Google’s client side runtime is the browser and JavaScript. Google is investing a lot to make both technologies better and faster. Google Chrome already speeds up the executing of JavaScript significantly. With the Google Web Toolkit (GWT) they are offering an excellent development environment for JavaScript based applications. Gears is Google’s solution to take web applications offline so they can run even without network connectivity and synchronize once the network is available again.

Beside that there are many excellent JavaScript libraries like jQuery, jQuery UI and ExtJS out there. For most scenarios it is possible to create similar user experiences like you would expect from technologies like Flex or Silverlight – however even without installing a separate runtime.  Just take a look at the great examples of jQuery UI or ExtJs to get an idea.

Sun

Sun is betting on its Java Virtual Machine (JVM). There are many different UI technologies available on the Java platform: AWT, Swing, SWT and most recently JavaFX.

Maybe you have never seen one but actually it is possible to create good looking UI’s with Java Swing ;-) Just take a look at the excellent Substance Java Look and Feed as an example. And of course IBM did a great job with SWT to dress up the Eclipse IDE.

The Eclipse based Rich Client Platform (RCP) is the most well known framework to create composite applications on the Java platform. 

JavaFX is the brand new offering for creating and delivering rich Internet applications that can run across a wide variety of connected devices. The current release (JavaFX, June 2009) enables building applications for the desktop, browser and mobile phones. JavaFX applications will run on any desktop and browser that runs the JRE and on top of mobile phones running Java ME.

As you can see there is a lot of competition and there are exiting new developments going on in this area. Do you see any of the big players ahead? Which horse would you pick?

• The Story of the Office Ribbon
• The Metro Design Language
• Seadragon / Deep Zoom Technology
• Live Labs Pivot: A great way to visualize massive amounts of data
• How to Create Attractive, User Friendly Applications?

Ever wondered why a computer bug is called a “computer bug”? I was quite amazed to find out that the term can be understood quite literally:

According to the National Museum of American History:

In 1947, engineers working on the Mark II computer at Harvard University found a moth stuck in one of the components. They taped the insect in their logbook and labeled it “first actual case of bug being found.” The words “bug” and “debug” soon became a standard part of the language of computer programmers.

The operators removed the moth and taped it to the log. (See the picture below.) The entry reads: "First actual case of bug being found."

They had "debugged" the machine and the terms computer bug and "debugging a computer program" were born.

• Mona Lisa: Why Is She Smiling?
• When Ideas Have Sex
• What’s Easier? To Change Yourself or the World Around You?
• Watch Matt Dancing Badly Around The World
• UI Platforms: Which One Would You Pick?

Today I created the first logo for this site and I am pretty sure it will change a couple of times in future. So I thought it would be nice to keep a history of those changes:

V0.1: Generated Logo

My first idea was to use a logo generator to do the job. After searching for “logo generator” on delicious I found quite a few. This is the best result I got after playing around with those tools:

This logo was created by a free tool called “Logo Creatr”. I know it looks like the Google logo but I really like the colorful design. However it reminds me a bit of the first experiments I did with rendering tools like 3D Studio Max more than ten years ago… I think the Google logo could really benefit from a face-lifting these days… :-)

V0.5: Self-made Logo: First shot

Finally I decided to create my own self-made logo. I started by searching the web for inspiration. Then I was refreshing my design basics by browsing the excellent The Non-Designer’s Design Book. This book is great for those of us who need to put together a flyer, presentation, newsletter, website or logo but don’t have the background in design. I highly recommend this book. For my logo I studied the chapter on complementary colors which helped me a lot. Here is my first shot:

V1.0: Self-made Logo: First release

After some more tweaking I had my fist design:

The solid background stands for solid principles and values. The colorful design stands for curiosity, passion and interests. The red/white combination has special meaning as these are the national colors of my home country Austria. The font is a called “Jokerman” that’s the fun aspect. And if you don’t get it from the image – there is the motto written in plain English :-)

About the numbers: 12 is a symbol of perfection: 12 months in a year, 12 signs of the Zodiac, 12 doughnuts in a dozen. 12 is one of two sublime number’s – the other one being 6086555670238378 989670371734243169622657830773 351885970528324860512791691264. Somebody else can have that one for his logo :-D.

So 12 is the perfect number – then what about Six? Well Six is still a perfect number – let’s think of a beautiful six-sided (hexagonal) snowflake pattern for example. But sill – it’s just half of the ultimate perfect number – there are element of crappiness to it. It’s a little bit like the relationship between 42 and 21. 21 being only half the truth…

This will do for now – however if you have any tips for future improvements your comments are welcome.

V1.5 Self-made Logo: Update

Whatever you want, wherever you go, whatever you do in your life, wherever you end up or wherever life takes you…

… do what makes YOU happy.

• UI Platforms: Which One Would You Pick?
• The Story of the Office Ribbon
• The Metro Design Language
• The Holstee Manifesto: This is Your Life.
• SharedMinds Desktop – Quickstart