Posted by Chris Brandsma on Oct 9, 2009 in
Dotnet |
View Original Article I got annoyed this week. We were doing our planning poker (with the cards) when one of my coworkers broke out his IPhone instead. He had a planning poker app on his freaking IPhone. I whipped out my Windows Mobile phone and – did nothing. I grabbed a deck of card and moved on.
Afterwards though, I did a couple of quick searches and found nothing. Near as I can tell there is no Planning Poker app for Windows Mobile. So I made one.
http://planningpoker.codeplex.com/
The app should run on Windows Mobile 5, 6, and 6.5. It required .Net 2.0 Compact Framework to run as well. If someone really wants, I can compile it down to pre-Window Mobile 5. Also, I wrote it with touch screens in mind. It might work on a non-touch screen device, but I really don’t know.
The part that made be blog about this though was the amount of time it took to make this. About an hour. Start, finish, and install. So it is possible to make an app quickly in Windows Mobile if you want to. — OK, reality check, we are not talking about a complicated app here. The point is, the application did not take any longer than a normal WinForms app would take to code.
The entire project is up on CodePlex, code and all. MS-PL license, so go nuts if you want to.
Tags: Esoterica
Posted by Jan Van Ryswyck on Oct 9, 2009 in
Dotnet |
View Original Article I’ve been learning a bit more about Service-Oriented Architecture (SOA) and Event-Drive Architecture (EDA) over the last couple of months. Something that kept coming back in the articles and books I’ve read so far is the concept of an Enterprise Service Bus (ESB). I’ve heard numerous times about NServiceBus, Mass Transit and Rhino Service Bus in the past, but I’ve never fully realized what types of problems these technologies try to solve. Besides trying to learn about the scenarios and business needs that drive these technologies, I also decided to take a closer look at NServiceBus by creating the simplest example I could think of: Starbucks!
You’ve probably found out by now that yours truly isn’t capable of making up innovative sample applications, but since we actually have two (!) Starbucks shops already here in Belgium, I couldn’t let this go unnoticed either.
The scenario is actually quite simple:
- The customer places his order at the cashier.
- The cashier passes the order to a barista who starts preparing the drinks.
- The cashier asks the customer to pay for his order.
- When the customer paid for his order at the cashier, the barista is informed that the payment has been completed.
- When the barista finishes its order, he checks whether payment has been completed and delivers the order to the customer.
I’ve used NSB 2.0 for this exercise, which is the trunk version at the moment. The thing that amazed me the most was how easy it is to get started. I pretty much expected to be muddling around for a week before I could actually send my first message, but this was certainly not the case. Let me show a couple of basic code snippets that illustrate how NSB is used.
Here’s an example of the fluent API for bootstrapping NSB:
Configure.With()
.StructureMapBuilder(ObjectFactory.Container)
.MsmqSubscriptionStorage()
.XmlSerializer()
.Sagas()
.NHibernateSagaPersisterWithSQLiteAndAutomaticSchemaGeneration()
.MsmqTransport()
.IsTransactional(true)
.PurgeOnStartup(false)
.UnicastBus()
.ImpersonateSender(false)
.LoadMessageHandlers()
.CreateBus()
.Start();
Notice that I’m able to reuse my IoC container of choice that is also used elsewhere in the application. After bootstrapping NSB, the IoC container contains an instance of IBus which we can use to send and publish messages, etc. …
A message that can be sent with NSB must implement the IMessage interface.
[Serializable]
public class NewOrderMessage : IMessage
{
...
}
Notice that NSB doesn’t require a message to be a class. You can just as well use an interface:
public interface INewOrderMessage : IMessage
{
...
}
A message can be send using an instance of the bus:
_bus.Send(new NewOrderMessage(...));
Handling a message is accomplished using a message handler that implements the IHandleMessages interface:
public class CashierMessageHandler
: IHandleMessages<NewOrderMessage>
{
public void Handle(NewOrderMessage message)
{
...
}
}
The destination of a message must be configured in the configuration file of the sending application.
<UnicastBusConfig>
<MessageEndpointMappings>
<add Messages="CashierContracts" Endpoint="cashier"/>
</MessageEndpointMappings>
</UnicastBusConfig>
When publishing a particular message, this kind of configuration goes in the configuration file of the subscribing application instead of the publisher.
Bus.Publish(new PaymentCompleteMessage(...));
<UnicastBusConfig>
<MessageEndpointMappings>
<add Messages="CashierContracts.PaymentCompleteMessage,
CashierContracts"
Endpoint="cashier"/>
</MessageEndpointMappings>
</UnicastBusConfig>
NSB also supports sagas. Here’s an example of how to create a saga.
public class CashierMessageHandler
: Saga<CashierSagaData>,
IAmStartedByMessages<NewOrderMessage>,
IHandleMessages<PaymentMessage>
{
public void Handle(NewOrderMessage message)
{
...
}
public void Handle(PaymentMessage message)
{
...
}
}
public class CashierSagaData : IContainSagaData
{
public virtual Guid Id { get; set; }
public virtual String Originator { get; set; }
public virtual String OriginalMessageId { get; set; }
...
}
The saga data class contains data that should be persisted during the lifetime of a saga so that it can be used when different messages arrive. So make sure that the public members of saga data classes are virtual!
You can find the code of this sample application using NServiceBus at the Elegant Code repository (turns out we actually have one of those at Google Code). I’ve probably did a whole bunch of things wrong with it, but I definitely learned a thing or two in the process 
.
There’s a lot more that I want to learn about NSB like testing sagas, the generic host, etc. …
Let me round of this post by providing a couple of resources that were very helpful:
I just want to say thanks to Andreas for answering my stupid questions on the NServiceBus user group.
Till next time,
Tags: Esoterica
Posted by Al on Oct 9, 2009 in
Dotnet |
View Original Article I was lucky enough to travel to Bogota to teach a ESRI ArcGIS Silverlight API workshop for the LAUC. All ESRI distributors in South America came to the conference and some came to the workshop. Was great meeting all the people passionate about GIS. It’s always great to travel to different countries and learn new cultures. Kills me to be away from my wife and kids, yet the opportunity of seeing new countries and meeting new people is just great. Below a few snapshots of the week.
Picture above the ESRI logo in Spanish
The class learning the ESRI Silverlight API for ArcGIS Server.
Picture above of the students attending the Silverlight workshop from different ESRI distributors at break time.
Picture above a lunch with all the students, Silverlight and Flex.
Picture above a menu item, the World Trade Center for $13,500 pesos.
Kerry Coffin (the Flex instructor) with the Mayor of Bogota.
Was great meeting all the great people that is passionate in GIS, Bogota is a huge busy metropolitan city that I won’t mind to come back, as this time I wasn’t enable to visit the city. Next year the ESRI Latin America User Conference will be hosted at the city of Mexico by the ESRI Distributor.
Follow me in twitter | bookmark me | Subscribe to my feed | Add stats to your blog
Tags: Blog
Posted by Al on Oct 9, 2009 in
Dotnet |
View Original Article I was lucky enough to travel to Bogota to teach a ESRI ArcGIS Silverlight API workshop for the LAUC. All ESRI distributors in South America came to the conference and some came to the workshop. Was great meeting all the people passionate about GIS. It’s always great to travel to different countries and learn new cultures. Kills me to be away from my wife and kids, yet the opportunity of seeing new countries and meeting new people is just great. Below a few snapshots of the week.
Picture above the ESRI logo in Spanish
The class learning the ESRI Silverlight API for ArcGIS Server.
Picture above of the students attending the Silverlight workshop from different ESRI distributors at break time.
Picture above a lunch with all the students, Silverlight and Flex.
Picture above a menu item, the World Trade Center for $13,500 pesos.
Was great meeting all the great people that is passionate in GIS, Bogota is a huge busy metropolitan city that I won’t mind to come back, as this time I wasn’t enable to visit the city. Next year the ESRI Latin America User Conference will be hosted at the city of Mexico by the ESRI Distributor.
Follow me in twitter | bookmark me | Subscribe to my feed | Add stats to your blog
Tags: Blog
Posted by Jen Gordon on Oct 9, 2009 in
Design & Graphics |
View Original Article 
For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable and creative UIs).
This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view.
1. Mirroring Native iPhone UI Elements
“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications.
Facebook (iTunes Link)
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.
Where (iTunes link)
Where has a similar concept, allowing users to swipe left and right to access more data.
Tweetdeck [iTunes link]
Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.
2. Simplifying The Interface
Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information?
Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data and creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.
Flickr [iTunes link]
Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are handled by interacting with the photos themselves. Simple and smart.
3. Hardware-ish Look
Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it.
Convertbot (iTunes link)
Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.
Little Snapper (iTunes Link)
Little Snapper mimics the wheel that you turn on a typical digital SLR.
iHandy Level (iTunes Link)
iHandy Level simulates the look and functionality of a real, well-used leveler.
Where To? [iTunes Link]
This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.
4. Rich, Padded And Pretty List Views
You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues!
Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with big pretty buttons. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography.
Delivery Status Touch (iTunes Link)
Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.
Be Happy Now (iTunes Link)
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.
Next Read [iTunes link]
The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.
Nike [iTunes link]
Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.
Borange [iTunes link]
Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.
5. Layered Interface
Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:
- It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface).
- It gives users a faster route to the information they want.
- More screen space is available for information.
Tweetie (iTunes Link)
Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!
Barnes & Noble [iTunes link]
Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.
USA Today [iTunes link]
USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.
myPantone [iTunes link]
Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.
6. Icons For The List View
Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.
iStudiez (iTunes Link)
This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.
Top Floor (iTunes Link)
Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.
New York Times
Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.
Filemaker [iTunes link]
Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.
7. Illustrations in use
Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.
Magnetic Personalities (iTunes link)
An excellent example of how buttons don’t have to look like standard buttons.
SugarSync [iTunes link]
This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.
Mom Maps [iTunes link]
Another example of how illustrations do a great job of pulling together the whole concept of an application.
8. Using Gestures
Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).
Mover (iTunes link)
Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.
ABC Animals [iTunes link]
This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.
All Recipes [iTunes link]
This applications allows you to mix in various elements to create your next meal using gestures.
Something is missing?
We missed some common design approach or trend? Please let us know in the comments to this post!
About the Author
Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist, which will release its latest app Farm Friends in just a few days. She specializes in usable interfaces, beautiful design and straight talk. She loves her family and the iPhone and periodically dreams that she’s close friends with Dolly Parton. Follow her on Twitter or drop her a line to say “Hi!”.
(al)
© Jen Gordon for Smashing Magazine, 2009. |
Permalink |
11 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: iphone, showcases, trends
Tags: Design Showcase, iphone, showcases, trends
