November 20, 2008

Designing DekiMobile

Hopefully some of you have played around with DekiMobile already or perhaps you’ve even downloaded it for your Deki. Want to know a bit about what went on behind the scenes? Here’s the scoop from a UI design perspective.

DekiMobile is built on top of the existing API, providing a new web endpoint for Deki separate from the server install of MindTouch Deki. While you can’t edit any pages on DekiMobile, you can view any page in Deki, add comments to the page, share a page, and view attached files as well as tags and related pages. We added the ability to send a “Note” to another user within Deki, which acts as a messaging system. Notes show up under the comments on your user page, which is intended to act as a dashboard for DekiMobile. You can set up shortcut links and other information on this page to enhance your experience.

The best part about designing for the iPhone was that we knew what to expect. We knew the exact screen size (even though technically there are two — portrait and landscape), the browser that the user will be using, that the font will be consistent, that the images will display properly, and overall, we could be sure that what we saw when testing it was identical to what the user will see. That kind of predictability is pretty refreshing in the web design world.

It wasn’t all fun and games though. We did run into a few challenges along the way:

Not having control over page content within Deki

Since there is poor scaling support with tables on the iPhone, there is some overflowing content on pages where users added tables that requires horizontal scrolling, which is less than ideal. Also, scripting-dependent extensions (such as Google maps) do not show up on the iPhone - extensions which rely on text work great, though!

Fitting all of the controls/features into a small space

Apple prides themselves on having a clean style, and we wanted to maintain that. However, transferring all of the functionality of Deki onto a small device required some creative thinking. We had to strip Deki down to only the most important and manageable features, while also making sure the controls were large enough to tap with a finger. After several layout revisions, we came to a balance between the two.

Minimizing user input

Texting has become a daily practice for many people, yet typing on mobile devices can still be inconvenient and time consuming. In an attempt to help you save time, we implemented auto-complete for the username on the login screen as well as the “To” field in the Notes section. We let the iPhone take care of the rest (the auto-suggest feature) when typing a comment or note to another user.

So check out DekiMobile and tell us what you think! Visit m.mindtouch.com on your iPhone or download and install it on your own server.

Leave a Reply