Posts tagged "iphone"

iPhone Apps for Basecamp Next

With the arrival of the new Basecamp earlier this year (initially codenamed “Basecamp Next”), it has become an integral part of our workflow at savvy apps. We run both in-house and customer projects through it to iterate through designs, discuss broader development related-items that might not have tickets in Sprint.ly, and keep track of schedules.

The new Basecamp launched with an entirely different API though, meaning all mobile Basecamp clients became obsolete. Thankfully, there are now more than a handful of iPhone apps available on the App Store, which are built against the new API. Considering the importance of being able to quickly participate in discussions or track updates while on the go, I’ve given about six options a try with Carabiner, Rappel, and Lodge bubbling to the top.

While each app has their own merits—and in particular, Lodge and Rappel are nicely designed (although I’m not a fan of Rappel’s app icon)—I prefer Carabiner for four reasons:

Latest Activity

Carabiner provides a decent overview of everything happening in a project. In my opinion though, Rappel has the best project “Overview” screen. I prefer its layout and design to Carabiner’s but it comes up short in other areas.

BC for iPhone

Comparatively, Lodge doesn’t have any activity information, which results in having to visit multiple tabs to check for and subsequently view updates. 

Scroll to Latest Comment

My favorite feature in Carabiner is a real time saver; when selecting any “Discussions” item, the screen will automatically scroll down to the latest comment. Carabiner also includes a “+” button in the navigation bar, which allows a comment to be added independent of the current thread position.

Similarly, Rappel has a permanent way to add comments and its approach reminds me of Campfire for iPhone. Lodge requires scrolling all the way to the bottom of the thread to add a comment, which is particularly tedious for length discussions. 

Viewing File Attachments

Related to the last point, of these three iPhone apps, Carabiner is the only one that allows quick viewing of file attachments. Specifically, it will provide a visual cue when files are attached to a comment. To view a file, Carabiner only requires a simple, single tap on the file icon to view it right then and there. Rappel includes a visual indicator as well but requires a tap to initiate a download first. Once the download is complete, another tap is needed to view the file. As far as I can tell, Carabiner combines both steps into one.

Lodge is the worst offender on this front. In the “Discussions” item, there’s no information about file attachments. Thus, it is very easy to miss that a comment had a screenshot posted with it unless the commenter mentioned that in the comment itself, such “Here’s an updated version of the screen attached…”

BC for iPhone 2

Full Featured

Even though it’s read-only right now, all “Text documents” are viewable in Carabiner. Lodge goes a step further, allowing editing as well. Rappel doesn’t include “Text documents” at this time. In general, Lodge and Carabiner appear to support the most Basecamp features right now.  

Concluding Note

I had been using Lodge as my main iPhone client until last week but continued to struggle with the issues above. Additionally, Lodge never seemed to remember the last view I was in and is the most unstable of these three options. Carabiner does have at least one nasty bug too, which is that I’ve infrequently seen “Discussions” sometimes show as empty or blank.

Even though I’m not regularly using Rappel right now, if it handled file attachments like Carabiner and offered a way to quickly jump to the bottom of a thread, I would likely replace Carabiner. That’s despite the fact that I’m not a huge fan of Rappel’s icon; it just seems odd relative to the interface of the app. I could get over the icon because I really like Rappel’s “Overview” screen for projects (shown above), their global activity views across projects, and how they approach threading comments on “Discussions.”

In the meantime, Carabiner is the way I’m using Basecamp on the iPhone. I’ve kept Lodge and Rappel installed though, as they both have proven to receive regular updates. The good news it that Basecamp clients are again alive and well on the iPhone and elsewhere. Give these options a try and see which one makes the most sense for your own workflow.

Five Ways to Improve Gmail for iOS

A native Gmail app on iOS had been anxiously awaited for years but when Gmail for iOS launched back in November 2011, it do so to much berating. The main complaint against the app is that it is basically an iOS wrapper around the standard mobile web app. Personally, I found the criticisms overall harsh but it does need to be improved. In no particular order, here are five ways to do that.

List Versus Back Button
SlideoutI recently wrote about slide-out navigation and Gmail for iOS has a nice slide-out nav implementation. But the use of a back button on the main screen, instead of a list or item button, just drives me nuts. The back button is completely fine to use, if and when, it’s actually returning a user to a previous screen. It should not, however, be used to trigger the slide-out. It’s visually ugly and functionally confusing.

Push
I’m a big fan of Boxcar and historically, I used it to manage all my notifications. Unfortunately, a major limitation of it, is that for email notifications, it cannot open directly to an individual message. If selecting Mail.app as the email app in Boxcar, a Boxcar notification for email will start a new email as the hack to open Mail.app. Similarly, for Gmail for iOS, it just opens the app without going directly to the message. This proves frustrating over time and has lead me to use the iOS notifications for email since the launch of iOS 5.

Right now, Gmail for iOS has a badge, but no push notifications. It’s unlikely Boxcar will be able to update push notifications for email to open to an individual message. So beyond Apple, Google is going to be the other provider that can provide a better experience by opening push notifications directly to its message. I’m surprised Gmail for iOS has been out this long without push notifications being added; Google has indicated it’s a priority.

Composing Mail
Composing an email in Gmail for iOS is a less than ideal experience. In fact, the compose view is one of the main reasons I don’t use the app.

I appreciate the larger composing area relative to Mail.app but the font is extremely small comparatively and not worth the tradeoff. Also, if the mobile signature is checked, a feature that was updated in the latest update, then it should show at the bottom of the compose screen, as with Mail.app.

Compose

Responding to Mail
A corollary to composing mail is responding to mail. I’m going to nitpick here even more but I really dislike the fact that Gmail for iOS doesn’t quote the response and instead, shows the previous message below a reply as plain text. This makes threads messier over time, as well as inconsistent, if composing mail in rich text in the desktop browser (where, in that case, the reply will be quoted).

Replym

Label and Move
Labeling and moving items in Gmail for iOS is extremely tedious. It takes no less than three taps to move an item and no less than four to apply a label. We might be able to live with with that number of taps but the label screen itself has not been thought out very well.

Scroll

For anyone who actually uses labels, it’s simply untenable to continually have to scroll through a long list of them to find the right one to apply. On the iPhone, one only needs to have more than ten labels to make the label view scrollable. Outside of redesigning the UX for getting to the move or label screen, there are several ways to streamline this particular experience:

  • A simple fix to a long scrollable list is filter them by adding a real-time search box at the top of the view that will start revealing related labels.
  • Divide that list into sections to show the most used labels at the top or even offer an option to users to customize an “Actively Used” labels section.
  • Respect the Gmail settings available in the desktop browser to keep hidden labels hidden, thereby shortening that list (not a great solution but still better than a list of all labels). 

Concluding Thought

I know many are looking for more advanced features, such as multiple login support, “Send As,” and similar kinds of items but the basics need to be covered first. Gmail may never feel as native on iOS as it does on Android but it still can grow into a great app.

New iOS Design Pattern: Slide-out Navigation

Facebook fan page iphone appBack when Facebook first hit the iPhone in August 2007, it introduced the “dashboard” layout pattern to iOS. Many applauded the dashboard as a fresh take against the standard tab bar and a number of apps began following this pattern. Over time though, it proved to be a frustrating way of navigating because it requires the user to leave their current state to get to another part of the application. Additionally, it required paging the navigation as it grew, meaning additional gestures were needed before an item could be selected. The dashboard is largely extinct for iOS now but unfortunately, this pattern has become entrenched in Android.

With the launch of Facebook for iPad, Facebook has again introduced a new mobile pattern for navigation and this time they’ve created something simpler and more elegant: slide-out navigation. More significantly, this pattern has quickly gained traction and is now being used by more than several notable iOS apps.

Slide-out Navigation

On its blog, Facebook described its new navigation pattern—available on Facebook for iPad, as well as Facebook for iPhone 4.x—as “left-hand navigation.” I’ve chosen “slide-out” navigation because it is more descriptive and universal (e.g., Path includes it on the left and right side). I’m defining slide-out navigation as follows:

Slide-out navigation consists of a panel that “slides out” from underneath the left or the right of the main content area, revealing a vertically independent scroll view that serves as the primary navigation for the application.

SlideoutUp to this point, the slide-out navigations available in the App Store have typically consisted of a panel (menu) that groups related views together, breaking them apart through headers. The default views provided by the application have been placed at the top of the panel. Facebook’s headers include Favorites, Apps, Pages, Lists, and a non-labeled help area.

Fb close 2Facebook implemented its slide-out nav via a list button, with the left panel always snapping out to a single, fully extended position. Once the left panel is visible, it can be closed by either tapping the list button, by touching the mostly hidden main content area, or by swiping that area left. For that final closing action, any swipe left—even if it’s very minor (i.e., a flick)—will close the panel. These nuances are important, as the other implementations are observed.

Other Implementations

Gmail

Gmail for iOS was the next app to implement a slide-out navigation. Considering it launched several weeks after Facebook for iPad came out, it’s not clear how much Facebook actually influenced it. Its main functionality is the same but it does have several distinctions. The first is that instead of a list button, it uses a back button labeled with “Menu.” In my opinion, that is the biggest eyesore with Gmail for iOS. Secondly, it’s possible to swipe or drag right on the main content area to open the left panel. And finally, the left panel can expand or contract to a minimum and maximum size respectively.

Gios

Path

Path 2.0 is one of the most innovative iPhone apps to hit the App Store in some time. With all it’s flourishes, transition animations, and polish, it clearly received a lot of love and attention on even the smallest details. It’s slide-out navigation closely resembles Facebook’s, with a list button being used. But unlike Facebook, they include a swipe right gesture to see the left panel, similar to Gmail for iOS. They don’t, however, allow left panel resizing.

One minor annoyance regarding their slide-out nav is that the main content area and the list button actually don’t provide the minimum tappable target sizes suggested by Apple when in its expanded position. As far as I can tell, they’re roughly 40 pixels instead of the suggested 44 pixels. Beyond being slightly less gesture-friendly, the byproduct is that the list button is also partially cutoff.

Fvp 1

My final comment regarding Path is that it’s arguable whether it really requires a slide-out navigation at all. Generally, it’s more useful when there are many content views, especially ones that can grow dynamically, as is in the case with Facebook and Gmail (e.g., Gmail labels).

Authentic Jobs

The Authentic Jobs app was featured by Apple back in early December 2011 and its version of a slide-out navigation is probably one reason why. Technically, it doesn’t fit the definition above, but it’s effectively providing the same user experience.

Authentic Jobs uses an item button in place of the list but more significantly, does not slide the view when that item button is tapped. Instead, it provides a popover-like view with a vertically scrollable list.

Aj

Astrid is another iPhone app that opts for using an item over the list button but it then follows Facebook’s slide-out interaction pattern exactly.

Concluding Notes

These patterns help formulate how to properly implement a slide-out navigation. Should it be a navigation scheme implemented in your iOS app, there is some leeway and flexibility available, as shown with these examples. But, there are at least four best practices that should be followed:

  1. Slide-out navigation is best served in content-related apps, especially when there are many views that can grow dynamically.

  2. Use a list or item button to trigger the panel or popover (i.e., not a back button like in Gmail for iOS).

  3. When the navigation panel is in the expanded state, ensure the minimum width of the mostly hidden main content area consists of at least a 44 pixel wide tap target size (i.e., not like Path).

  4. Keep the opening and closing gestures for the slide-out navigation consistent with these observed patterns; snapping the panel closed versus making the panel resizable is winning the day, at least for now.

Twittelator Neue – Innovative iPhone Design

Just when you think a Twitter interface cannot be reinvented, Twittelator Neue comes along.

The first interesting choice was the alternate way to change views. Like our app Agenda, they’re using paging to more quickly change views. It’s also possible to save specific views and switch them from the main timeline. Notice the page indicator above the main timeline in the screenshot below.

Tneue

The second neat feature is inline image previews that reveal different parts of an image as the view is scrolled.

Tneue2

I’m also really liking this beautiful popover-like interface, which they also happen to feature on the app’s website.

Tneue 3 

Congrats to Ollie Wagner and Andrew Stone on this release.