Lately I have been thinking about user design and experience as I prep my app for the App Store.  Here are six things that stood out most about the Evernote iPhone app and the take-away ideas I got from looking closer at the app.

1. The mobile apps immediately present 4 distinct actions for note acquisition.

Evernote breaks down into two key activities: note acquisition and note retrieval.  Given the detached nature of the mobile device and the sluggishness still experienced with cellular networks, the note browsing and searching experience is not ideal.  The constraints of the device and the unpredictable nature of the network, I believe, led to a focus on what a mobile device is good for (note capturing) and make that the key action in the mobile versions of its application.

Having the app launch into the note acquisition screen implicitly signals to the user that this is the type of activity that you should be doing on the device.  It seems counterintuitive to restrict features to simply not port them directly from the desktop or web offering.  But by limiting the scope of the application, it actually maximizes the experience for the user.  In Evernote’s case they cannot completely focus on note capture at the expense of cutting out the other actions.  These additional activities are included, but they are relegated to the tab bar on the iPhone and the sub menus on Android devices.

2. Smart layout and design can make sub-optimal experience tolerable

Given the limited real estate available on mobile devices, it is unsurprising that note browsing is a sub-optimal experience.  That being said, I think that Evernote does an excellent job making due with what little space it has.  Visually we are given two options, depending on the orientation of the phone, in which we can browse our catalog of notes.  While holding the phone in portrait mode, each note’s metadata is visible and allows the user to see titles and tags in addition to a thumbnail image of the note.  While holding the phone in landscape mode, the note browser is transformed into a tiled-thumbnail view which shows more notes in the visible frame.  If you can recognize the note by the rough appearance or layout of the text, you can pretty rapidly find what you are looking for. 

Most people hold the phone in portrait mode so it follows that the default view is the easier of the two to quickly grasp.  The two views provide the user with choices and trade offs: lower information density with a greater amount of detail or higher information density with less detail.  By giving the user options, Evernote overcomes the inherent limitations of the mobile device and improves the user experience.

3. Search function is a key but clunky feature in the mobile app.

Evernote has outstanding OCR software that makes everything searchable.  Given that search is the killer feature of Evernote, it is surprising that search on mobile devices seems like a second-class citizen.  The typical standard search box is visible on most of the non-note capturing screens, and the text search works as expected.  Search does have some enhanced features like map view and search near here offered as options to help refine your search, but I am not a fan of either.  The actual search queries appear to be executed on the server side and, as a result, the processing time can vary depending on your network connection.  In order to do a location based search the app has to make network requests for the search results and get the map coordinates, and this typically translates to a noticeable wait when these types of searches are performed.  I feel like search could cut out the location-based search filter entirely and be no worse off.

4. Sync Button is a “kitchen drawer” tab on the iPhone App

The sync tab is mislabeled, and the label masks all the other functions that are exposed on that tab.  Contextually, account information and device-specific settings aren’t readily associated to sync even though the sync process in Evernote synchronizes everything associated to your account.  The action of synchronizing your notes could be integrated into the note screen, and the settings, account information, and about information could all be separate tabs managed by the tab controller already being utilized in the iPhone application.  In fairness the move to limit the tabs is consistent with the less-is-more type of attitude, and the combination of the multiple actions into the single tab is most likely a compromise to simplify the interface.

5. The tips UX on the iPhone is well executed and non-obtrusive

The tips screen, integrated into the main view of the Evernote iPhone app, is an excellent way of sharing information about features and activities without being pushy and obtrusive.  With a smooth animation that peels back the main view to show the tips view, the user can get a quick suggestion on a feature and then be back capturing or browsing notes.  This is a small but well executed design element that adds to the experience.

6. Sharp branding

As far as the aesthetics go, I like the Evernote logo.  A combination of an elephant and piece of paper plays off the “memory like an elephant” saying and the note-based nature of the application.  The logo, paired nicely with a soft green color and a nice font, is the focal point of the splash screen welcoming you into the application.  The other platforms do not utilize a splash screen since the application load times aren’t as great as the iPhone, but the same basic logo/font/color scheme is consistent in the icons used on all platforms.

Lessons learned from the Evernote app:

• Instead of frustrating users with clunky interfaces and hacks to enable certain features of your service or app, only port features or activities that enhance the service and take advantage of the features of mobile devices rather than expose the limitations of them.
• Focus on the activities that can capitalize on the advantages of a mobile device instead of fighting the platform.
• Optimize for those specific use cases that make sense that you want to capitalize on.
• Be ruthless in what you cut out or be stingy in what you put into the mobile version
• Be consistent in your branding, color scheme, and feel of your applications.
• Good design can always speak louder than any type of instruction.  Help users fall into the pit of success.

You can get the iPhone app in the iTunes App Store

Overall Themes

Two main themes that emerged during the sessions: the future of mobile is web-based apps rather than device specific apps, and the road to mobile riches probably doesn’t run through an app store.

Multi-platform development is hard

Certainly scenarios exist where multi-platform apps make sense, but it is imperative that the risk/reward ratio be in your favor to have a chance to be successful.  Don’t underestimate the amount of effort and headaches that developing and supporting multi-platform apps will create.  Going the mobile web app route has it’s limitations, but it is the closest thing to “write once, run anywhere” that mobile has.

Cool Tools

Really cool tools like PhoneGap and jQTouch are out there that help lower the barriers to making apps and, in the case of PhoneGap, multi-platform apps.  Both tools have been released under MIT licenses and are free to use.

One Man’s Secret Sauce for Success

David Whatley gave a funny presentation that provided a lot of laughs and some great insights into how the iPhone app store works.  Even better was his ability to back up what he was saying with some real sales data and numbers.  His secret sauce for success:  PR, code re-use, and playing to your strengths.

App stores are glorified catalogs

Standing out or even being noticed amongst all the other apps is extremely difficult.  Relying only on the app catalog to drive sales is effectively a “post and pray” strategy akin to trying to win the lottery.  Try to find a niche and solve a problem.  Focus on creating value for markets not just an app for it.  Mark Murphy described many ways to make money in mobile other than direct app sales during his talk and in a series of blog posts about Android Business Models.

Links

• PhoneGap
• jQTouch
• iPhone Dev Depot
• Mobile Web Development Tips and Tricks (Slides)
• Making Money at Mobile (Slides)
• http://github.com/mikelaurence/CoreResource (Cool iPhone library)

Books Recommended During the Conference

• Aiming at Amazon
• The Dip
• The Whuffie Factor

Overall, the signal-to-noise ratio at the conference was good but not great.  I did manage to glean at least one or two new ideas from most of the sessions I attended, and it was great to see the enthusiasm that the Chicago tech community has for events like this.

Likes:

• Speed.  I have the older iPhone 3G hardware and from a user experience perspective it was not that bad.  When compared to the Nexus One, however, it is down right sluggish.  This probably isn’t as big of a factor when comparing a 3GS versus Nexus One, but for someone coming from a 3G iPhone, it is a huge plus.
• Being able to run apps in the background.  Browsing the web while streaming Pandora and downloading an app in the background works flawlessly and shows no noticeable signs of lag or sluggishness.
• The OLED screen is really nice.  Higher resolution and OLED screen looks great in low-light situations and is supposed to save precious battery by not drawing less power than normal LCD screens.
• The Android OS is pretty sweet.  It has a lot of nice features like the status bar, an active “desktop” that you can put interactive widgets on as well as app icons, and an easy way to get music and files on and off the device.  
• Integration with Google Apps is fantastic as expected.  I love getting mail and talk updates in the status bar and the overall experience with the apps on the Nexus One is better than on the iPhone.

Dislikes:

• Cut and Paste is clunky.  I can see why Apple needed to spend awhile working out the UX issues before rolling it out.
• The touch interaction with the device has not been as good as the iPhone in my experience.  I am not sure where the blame lies (hardware or software), but I sometimes find it difficult to select elements in the UI.  This is not something that occurs frequently, but in the short time I’ve owned the device, it has occurred enough to be noticeable.
• 4GB of storage out of the box is lacking.  It is an easy upgrade but given the amount of money that Google is charging for the device, this seems like they are skimping here.
• The Android Market place experience is integrated nicely but isn’t as tightly integrated as the iTunes App Store.  This is arguably a good or a bad thing depending on how you look at it.  As a user this is a bad thing since it makes finding and buying apps more difficult than just popping open iTunes.  I’ve found the Android Marketplace, both on the phone and the web, hard to browse.

There are a few negatives that I can’t pin exclusively on the device but are still worth noting.  I have been using my AT&T SIM with the Nexus One and most likely will do so until my contract is up in a few months.  With that caveat out of the way, the talk quality seemed poor and the phone gets really hot when talking for periods greater than 10 minutes.  I hesitate to even mention these issues since I am not using the phone on the network it was intended, but  I know there probably are others considering doing what I did, and this feedback might help if someone is on the fence.

The Nexus One is exactly the kind of phone and competition that was needed to push Apple.  I strongly recommend anyone looking for a smartphone to give it serious consideration before running out and getting an iPhone.

I’ve been using regular 3 x 5’ notecards to sketch out different screens for the iPhone app I am working on.  On the ruled side I’ll scribble notes and call out must/should/wish components of the screens to help prioritize features.  On the blank side I’ve been sketching out wireframes of the screens to help get a feel for the UI and flow of the app.

I’ve played around with Balsamiq and, while the tool is fantastic, I find myself still partial to the notecards.  With the same rough dimensions of the iPhone and the flexibility of being able to quickly rearrange and reorder the screens, the cards suit my preferences as a visual-spatial learner well. 

As with most tools and techniques, personal preference plays a large role in how and when they’re employed.  I always enjoy checking out how other people work and try and steal glean ideas from them.  I’ve found the following blogs pretty useful for design, usability, and UX.  I hope they help inspire you to create something cool.

I ♥ wireframes
information aesthetics
everydayUX
Sender 11

And for good measure here is a snippet that shows putting a string on the general clipboard and reading it off.

string clipboardText = "Copy and Paste Me!";

UIPasteboard.General.SetValue(clipboardText,
"public.utf8-plain-text");
string actualClipboardText = UIPasteboard.General.GetValue("public.utf8-plain-text");

Assert.AreSame( clipboardText, actualClipboardText.ToString());

Enjoy.

[Updated(1/30/2010): Replaced NSStrings out with strings]

As for the chatbot, I’ve recently added a link logging feature.  Any URL sent to the chatroom now gets logged to the sqlite database.  Users can query the database right from the chat window by entering /links <number of previous links to return> and the links, timestamp and the person who sent it will be sent in an individual IM to the requestor.

Going forward, the two areas that I think need the most improvement are installation and documentation.  The majority of the questions and feedback that I have received are setup and configuration related.  Improving the installation and documentation stories at this point make the most sense and would be worth the effort. 

On the technical side of things, I am considering making a Chatsworth plugin for Windows Home Server.  Currently I am running the service from my home server and, given the always on nature that suits the chatbot and the low/no maintenance needed to running once it is setup, the pairing seems natural and could help provide a little better setup and configuration experience.

I hope to work on this more over the holidays and please feel free to reach out with a question or feedback.  Enjoy.

The control used by Apple to prompt you for your password isn’t available out-of-the-box in Cocoa Touch, but fortunately it is pretty easy to roll your own.  I’ve put together a sample project that shows a couple different techniques that are available for creating and customizing the control, and I’ll go over a few of them here.

The stock UIAlertView control consists of a title label, message label, and typically one or more buttons.  It is important to note that in Monotouch, a default button setup isn’t configured, and buttons have to be added explicitly.  If a UIAlertView is configured without any buttons, then dismissing the control will have to be done programmatically because the user will have no way to dismiss the control.  In both of my examples I’ve configured the control to have two buttons (Cancel and Ok), but I could have gotten by with just one.  If only one button is used, it is important to also note that the button is considered the Cancel button by the control, and the CancelButtonIndex property will refer to that button.

The easiest way to go about composing a UIAlertView with a UITextField is to create an instance of a UITextField and add it as a sub-view.  Since you’re adding a layer on top of UIAlertView’s view, the key will be fitting this new control into the UI.  There are two ways of going about this.  The first and maybe most obvious way to solve this problem is to make some room between the message label and buttons for the text field ala the iTunes password prompt.  Since the UIAlertView control has already been laid out, moving those controls around within the frame is not as straight forward a task as it may seem.  Before we tackle that we will explore a simpler method that overlays the text field directly on top of the message label.  You sacrifice being able to display an additional message to the user, but the end result looks professional and is very easy to implement.  This will also be the basis for getting the control to have the same look and feel as the iTunes password prompt, so it is important to understand this prior to attempting to move the controls around.

The key to overlaying the text field on top of the message label is setting the bounding rectangle for the UITextField.  The bounding rectangle is where the text field draws the box in which a user enters text.  For our purposes, the rectangle needs to be drawn in between the title label and the buttons.  It is important to make sure that it covers the area where the message label is drawn.  Thanks to the work of others we know that if we start drawing the text field at the x,y offset of 12,45 that the text field will hide the message label.

The code to overlay the text field is as follows:

void PromptForName(HandlerToUse handlerType)
{
    UITextField tf = new UITextField (new System.Drawing.RectangleF (12f, 45f, 260f, 25f));
    tf.BackgroundColor = UIColor.White;
    tf.UserInteractionEnabled = true;
    tf.AutocorrectionType = UITextAutocorrectionType.No;
    tf.AutocapitalizationType = UITextAutocapitalizationType.None;
    tf.ReturnKeyType = UIReturnKeyType.Done;
    tf.SecureTextEntry = false; 

    UIAlertView myAlertView = new UIAlertView
    {
        Title = "Please enter your name",
        Message = "this line is hidden"
    };

    myAlertView.AddButton("Cancel");
    myAlertView.AddButton("Ok");
    myAlertView.AddSubview(tf);
    // More Setup Goes Here
    myAlertView.Show ();
}

The method starts by instantiating a UITextField control with a bounding rectangle passed via its constructor.  The rectangle itself is constructed with four parameters via its constructor: the first two parameters set the x and y offset from the origin point of the control, and the last two parameters set the size of the drawing area.  After the initial construction of the UITextField, a few additional properties are set to customize the display. 

Among the properties set is the SecureTextEntry.  Setting this property to true will make the text field act like a password field and hide all the characters that you’ve entered.  Once the text field has been created and initialized, we move on to creating a UIAlertView.  Via object initialization, the Title and Message properties are set with some text.  Finally, two buttons are created, and the text field is added as a sub-view to the UIAlertView.  Calling the show on the UIAlertView causes the alert to pop up.  Below you can see the rendered control.

So now that we have the basic control setup, we can tweak it so that the text field and the message label can both be displayed.

If you recall our custom UIAlertView control is currently composed of two UILabels, two UIButtons and a UITextField that we added.  The UILabels are derived from UIView and is not a subclass of UIControl; whereas, the UIButton and the UITextField are both derived from UIControls.  Since we want to position the UITextField beneath the labels, we can use this knowledge to selectively shift only the UIControls in the view down leaving the title and message labels in place.

To accomplish this task the following steps need to be performed:

1) The control height needs to be increased to make space for the text field and provide additional space to move the UIControls.  This is done by setting the frame to a larger size.  The frame will be increased by the height of the text field plus a buffer, so the control has space between it and the others.

This is what the frame looks like after being enlarged:

2) Once the frame has been enlarged, we’ll loop through the sub-views looking for UIControls and adjust only those types down by the same text field plus buffer offset

Here is what the control looks like after each UIControl is found during the iteration through the sub-views.

Here is the code that does the control adjustment:

public class TextFieldAlertView : UIAlertView
{
    private UITextField _tf;

    // ... 

    private void AdjustControlSize()
    {
        float tfExtH = _tf.Frame.Size.Height + 16.0f;

        var frame = new RectangleF(this.Frame.X,
                                    this.Frame.Y - tfExtH/2,
                                    this.Frame.Size.Width,
                                    this.Frame.Size.Height + tfExtH);

        this.Frame = frame;

        foreach(var view in this.Subviews)
        {
            if(view is UIControl)
            {
                view.Frame = new RectangleF(view.Frame.X,
                                            view.Frame.Y + tfExtH,
                                            view.Frame.Size.Width,
                                            view.Frame.Size.Height);
            }
        }
    }
}

So now that the desired look and feel of the control has been established, it is time to wire up the control.  There are a couple options for handling events generated by the control: one is more in line with how Cocoa handles events, and another that is similar to how .Net works. 

The Cocoa way to wire up delegates involves subclassing a special delegate class associated to the control and selectively overriding the methods for the actions you want to customize.  In the case of the UIAlertView control, that delegate class is a UIAlertViewDelegate.  The delegate class includes overridable methods like Clicked where you can define the actions to take when a button on the control is clicked or where you can extend behaviors by overriding methods like Preseneted which is called after the control has been displayed to the user.

The .Net way to wire up events is to provide specific delegates for specific events.  To make interacting with the Cocoa Touch controls easier, Monotouch provides public events for each one of the methods that can be overridden in the UIAlertViewDelegate class.  Having the individual public events makes wiring up controls more intuitive for the .Net developer, but it is good to know about the Cocoa-style approach especially when looking at Objective-C examples and/or ADC docs.  I have examples of wiring up the control via both methods in the example source.

The last topic I’d like to cover briefly is how I encapsulated the customization of control by subclassing UIAlertView.  The key to getting the control to look right is to override the LayoutSubviews method and build out the text field, add it to the UIAlertView and shift the controls around there.

public override void LayoutSubviews ()
{
    // layout the stock UIAlertView
    base.LayoutSubviews ();

    // build out the text field
    _tf = ComposeTextFieldControl(_secureTextEntry);

    // add the text field to the UIAlertView
    this.AddSubview(_tf);

    // shift the UIControls to fit the text field
    AdjustControlSize();
}

I’ve added some more customizations to my subclassed UIAlertView control that allows you to enable the text field security via a constructor parameter and a tweak to the control’s Transform property to shift the control up so it isn’t hidden by the keyboard.  You can see those changes and the entire working example here on github.

Enjoy.

Links to some of the resources used:

• Alert View with Prompt (iPhone Development Blog)
• Displaying a password or text entry prompt on the iPhone (Junecode Blog)
• Look UIAlertView is Dating UITableView (codesofa)
• iPhone Dev Center: UIAlertViewDelegate Protocol Reference (Apple, login required)

My pet app project requires some pretty basic multi-level tabular data visualization, so that was the first thing I attempted to tackle.  I started my learning endeavor by reading the view controller programming guide from Apple’s ADC and working through a few of the tutorials listed on the Monotouch site.  One of the example tutorials listed was for a basic RSS reader.  Armed with his guide, I got up and running with a basic table view allowed me to drill down one level deep and return to the root via navigation button.  This was a great introduction and the easy to follow steps combined with the screenshots certainly hit the mark; however, this was not quite the layout I was looking for.

The data that I wanted to display calls for more than just a list-view-to-detail-view relationship that the RSS reader implemented.  As a beginner trying to figure out how to wire up my custom table controllers to each other and the navigation controller all via Interface Builder resulted in a lot of thrashing and a lot of ugly code.  I eventually was able to roughly approximate the behavior I wanted, but it was pretty obvious to me there had to be a better way.

I set out to see if I could find more Monotouch examples to see if I could pick up some tips and stumbled across Craig Dunn’s blog.  Craig not only put together apps for the Monospace and PDC conferences (and graciously provided the source) but also posted a Roget’s Thesaurus app that was just what I was looking for.  It was a simple app, but it had all the elements in play that I was looking for and an incredible diagram that tied it all together.

One of the key tips and tricks I picked up from Craig’s code was how easy it was to cut out the Interface Builder from the process.  I also generally tend to avoid using the designer whenever possible in Visual Studio but here it was a key factor in my understand.  This isn’t to say that I’d never use the Interface Builder again or that it doesn’t have its uses because it does but there was too much magic going on in how Monotouch links up the XIBs to their backing C# classes.  It wasn’t until I started explicitly creating views and view controllers instead of trying to wire them up after the fact did I start to understand how things were supposed to interact.

To implement a custom UITableViewController you need to set two properties with custom classes and override a method which is invoked by the framework when the view controller is loaded.  You’ll need to set the TableDelegate and DataSource properties on the controller with your own implementations of UITableViewDelegate and  UITableViewDataSource.  The implementation of the table delegate allows you to customize how the table will respond to certain events and the data source implementation provides not only the data the table uses but also how that data is to be displayed within the table.  Typically the ViewDidLoad method is overriden to perform the view setup work needed during initialization of the view controller.  Within the method the TableDelegate and DataSource properties can be set.

Example setting the TableDelegate and DataSource via the ViewDidLoad method:

namespace MultiLevelTableView
{
    [MonoTouch.Foundation.Register("RootViewController")]
    public partial class RootViewController : UITableViewController
    {
        class DataSource : UITableViewDataSource { /* Impl Here */ }

        class TableDelegate : UITableViewDelegate { /* Impl Here */ }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            TableView.Delegate = new TableDelegate (this);
            TableView.DataSource = new DataSource (this);
        }
    }
}

Example setting the properties during UITableView construction:

namespace MultiLevelTableView
{
    [MonoTouch.Foundation.Register("RootViewController")]
    public partial class RootViewController : UITableViewController
    {
        UITableView tableView;

        class DataSource : UITableViewDataSource { /* Impl Here */ }

        class TableDelegate : UITableViewDelegate { /* Impl Here */ }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            tableView = new UITableView()
            {
                Delegate = new TableViewDelegate(this),
                DataSource = new TableViewDataSource(this),
            };

            //You can set more properties here like size and
            //location in the frame etc.

            this.View.AddSubview(tableView);
        }
    }
}

The meat of the table view controller falls in the implementations of the DataSource and TableDelegate.

A basic DataSource setup involves overriding two methods used by parent controller.  The RowsInSection method tells how many rows need to be displayed in the table and the GetCell method returns a cell view which was customized for display by setting the text and display properties.

class DataSource : UITableViewDataSource
{
    static NSString kCellIdentifier = new NSString ("MyIdentifier");
    RootViewController tvc;

    public DataSource (RootViewController tvc)
    {
        this.tvc = tvc;
    }

    public override int RowsInSection (UITableView tableView, int section)
    {
        return tvc.RootData.Count;
    }

    public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
    {
        var cell = tableView.DequeueReusableCell (kCellIdentifier);

        if (cell == null)
        {
            cell = new UITableViewCell (UITableViewCellStyle.Default, kCellIdentifier);
        }

        cell.TextLabel.Text = tvc.RootData.ElementAt(indexPath.Row);
        cell.Accessory = UITableViewCellAccessory.DetailDisclosureButton;
        return cell;
    }
}

The TableDelegate is where the behavior of the table to various events is defined.  It is here in which we load up the next view to display when a user clicks on a cell.   A basic implementation of a table view delegate involves overriding the RowSelected method with instructions on what to do with the row now that it has been selected.  If the node selected happened to be a leaf node for example we might load up the detail’s view to display the nodes properties or if the node was the parent of more child nodes we would load another list view to continue to drill down into the data.  In our case we want to drill down to the next layer of data which is managed by the SubGroupViewController.

class TableDelegate : UITableViewDelegate
{
    RootViewController tvc;
    SubGroupViewController sgvc;

    public TableDelegate (RootViewController tvc)
    {
        this.tvc = tvc;
    }

    public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
    {
        // get info from selected row
        string selectedGroup = tvc.RootData.ElementAt(indexPath.Row);

        // load up new controller to display
        if(sgvc == null)
            sgvc = new SubGroupViewController(selectedGroup);

        // push the controller on the navigation stack
        tvc.NavigationController.PushViewController(sgvc, true);
    }
}

The hang up for me with using Interface Builder to try and get the multi-level table views wired together was mostly due to not being familiar with the objects I was dealing with and not understanding what properties are needed to be initialized so the framework can display them correctly.  Approaching the problem via the Interface Builder created a lot of noise that made seeing what was really needed to wire these table view controllers with the navigation controller difficult.  In this case the the pre-packaged templates and generic layouts provided by Monotouch and Interface Builder were more of a hindrance than help but that is to be expected while learning a new technology.

I’ve packaged up my implementation of a multi-level table view app and put it on github.  If anyone is looking for straight-forward, simple example of nesting table views hopefully this will help.

I also recommend checking out the following links which helped me immensely:

• Alex York’s Monotouch posts including the RSS reader 
• Sabon Rai’s Sample Code for UITableView
• Craig Dunn’s Blog