I do remember vividly that moment in time, when Mandela reconciled the people of a nation. It sent shivers down my spine. It still does.
Note: that’s a long post, I would recommend bookmarking this one and reading it later in your favorite app or browser. I’m positing it to DashPlus’s website as well, but being a large part of what I’ve done with my “free” time over the past 4 months, it’s got its place here as well.
Being done with DashPlus v1.0, I thought I’d share some of the design decisions that I have had to come up with in the past few months. Some of them were not easy, actually, as I resolved early in the project to simplify the design as much as I could. That also meant dropping some of the iOS 7 design codes, as I felt they were getting in the way rather than helping. Some of these elements of design were particularly hard to come, and they would not resolve by coding - or produce a mess of code, which anyone wants to avoid for the sake of maintenance at least. Besides, “design is how it works”, as Steve famously said, so I elected to focus on that rather than how it looks. That also meant not hiring a designer, an doing so, concentrating on the User Experience all by myself, not being distracted by some (often beautiful) design element.
General principle: getting out of your way
When I look back at all the apps I use and prefer, they all share one common trait: they just get out of your way. Generally you will forget that you are using this or that app. And they achieve that by 1- simple and well thought interfaces, 2- extremely simple and well thought navigation, 3- concentrating on the essential. Most of them have minimal chrome, they did even before iOS 7 came by and started that evolution towards less shadows and gradients and patterns. Two examples of choice: Plaintext and Ink for iOS. If I look closely at the apps I use the most, together with Mail, Phone, iMessage and Riposte, none require me to think in order to use them. Before I started, I had used about 20 task manager apps, ranging from free to $20. Most were a mess, the good ones needed me to adapt to an ideal workflow… that is not mine. So, from the onset, I just decided to scratch everything and start from zero. To do so, I stopped using anything but the Apple provided tools - Notes and Reminders - for a few months. A bit extreme, but I had a good reason: nothing, nothing, ever beat the paper and pen system together with the Dash-Plus system I have been using for years. Stemming from there, how do we devise something that gets out of the way, and lets me concentrate on the “do”, not on organizing myself to do more efficiently? That’s the point, in the end: if you want to be more productive, it is evident that you should be focusing on doing, not managing yourself. Remove the tension and stress, it’s easy actually: focus on your system and your stuff.
You can go pretty deep in workflow organization and planning. Products such as OmniFocus, though admirable in some way, overkill it in my opinion. Many users I have talked to do not realize that they are slaving to the app and their devices more than anything else, by trying to keep everything in check at all times. It’s not fundamentally wrong, but it doesn’t sound right anyway: the famous Getting Things Done method of David Allen is supposed to free you from constraints, not move you to another set of constraints. That was one of the things that attracted me to the Dash-Plus system: it takes the GTD method at the lowest level possible, and adds a simple markup on top, to make all the collected items actionable. To my great amazement, there was nothing available in digital form that implements this idea. I intuited from the start that swiping the items to get an instant action was how I wanted it. Sub-classing the
UITableViewController to do so took me about two hours, I shot a video of it and shared it with Patrick Rhone — the legitimate father of the Dash-Plus system — and we just had a “Ah Ah” moment. This would be the core of the app, and we would concentrate on a full gesture driven interface, with a navigation that integrates with those gestures. Not being tied to a client, I could spend as much time as I wanted to get this right (and I did, actually).
I’ve been using a lot of features of iOS 7, including of course those new transitions to bring up and shoot view controllers. Things that were pretty heavy programming a year ago are quite easy now. Having some menus or tables partially covering the screen popup is now a breeze. I do rely on this to pick tags and popup a list of all the lists in the root when moving tasks. I designed the animation to be really minimal, in the sense that it does not distract your attention. I did play with the new physics kit at great length, and it was plenty of fun to tweak the rubber banding effect (you can really get views bouncing like a kid on too much sugar), but in the end, less is more. The effect is just here to indicate that something is coming in, and staying there, on top of the current view. It is helped a bit by the shadow under. While keeping things minimal, without any hard edges, it integrates well on the screen. My first versions had all toolbars with written text for the
UIBarButtonItems (that’s still featured in the help videos 1), I switched in the end to icons from Font Awesome. They are as efficient in conveying the message (save/accept, dismiss, tick all/none, etc…), have the advantage of being universal and come as a complete collection. I did have to extend my
UIImage+Text category to be able to stick them in Navigation bars easily, but that was a breeze in the end, and well worth it I think.
Going full screen
Going full screen was a hard decision. I did have the status bar on for most of the early development, I think I even got it there while in alpha, albeit for only a short time. I remember telling my clients over and over again that there was no good reason to ever hide the status bar. While this was, I believe, completely true until iOS 7, things have now changed. Two main reasons took me to remove it: 1- integration with the rest of the app. In essence, DashPlus makes use of the new typography resources and auto layout in order to provide a highly readable experience (more about this later). now, let’s look at what I have in the status bar: cell provider, strength of signal, time, battery remaining. None of these information pertain to task management. I did try to substitute the status bar with my own at some point, and decided not to risk a rejection by the review team — don’t tease. So basically, it had nothing to do there, it brings nothing but a distraction to the app. Again the goal is that you spend the less time possible in the app, organize yourself , get to do stuff, leave the app as it won’t do it for you. 2- as hard as I tried, I always ended up with some barely noticeable flickers on or behind the status bar while moving the navigation bar around it (up, down, sideways). This just drove me nuts. Worse thing, I see it in all the apps that have redesigned for iOS 7, it’s a system glitch. And it drives me nuts. So do the parallax effect, by the way. I do not have anything against iOS 7, but the way, but I think that it has overshoot quite a lot. It still looks to me as a “I dare you” from Apple engineers to the competition. But yes, those flickers are really annoying, not being able to solve that was just another good reason to get rid of the status bar. Which was not so easy, by the way. In the end, that was all for the better, as I also took away the navigation bar of the root screen, and removed the “add” button to have only pull-to-add left in there. Not having anything on top, I also removed the tab bar controller from the bottom, and changed that for a single button with a floating tile menu generously provided by Matt Gemmell. A very clean root view, indeed, with only one button. Mst of my beta testers got it in less than a minute, so I guess gestures are working with that design.
Swipe and let back
I really enjoy swiping for actions, and we’ve had that for years to delete items from tables. It’s figured prominently in apps like tweeter front ends as well, where you swipe to reveal, and hit your target. I wanted something more direct, so that you just swipe until you reveal the right action. Try it, you will see, it’s conveniently faster. When one of my friends tested it, she requested sounds as well, to make it more playful. I did comply with the request with a few reticences (I do have a huge problem win my hearing, called hyper-acusis, which essentially means I really cherish silence), and I think it may help people with accessibility issues in the end. Not detailed here: I also had a crazy batshit moment where I tried to figure out the same using an accessory toolbar on top of the keyboard (not a good choice). Now one of the things that fascinated me was that it enabled a direct access in one gesture, versus swipe and type. And I sort of wanted to do the same for the tile menu…
The tile menu
All credit for this one goes to Matt Gemmell. There are so many things to love about this control… To be honest, I have tried at least half a dozen other ways to do the same, and still ended on Matt’s control. I did slightly tweak it in the end to get a more fluid animation, but all the ground work was there — cherry on the cake, he writes really good code, it was easy to read through and make the few tweaks. Among the other things I tried, the Path-type tile menu was a constant temptation. It is quite genius, as it extends one gesture smoothly, and it was an easy one to hack as well. Yet, there was something about the square layout of Matt’s tile menu controller that could not be beaten. It comes completely natural in DashPlus, with the 3 icons at the top popping some synthesis views, the tags, settings and about buttons well positioned on the sides. And more than anything, Matt being a really good UI/UX specialist, all the targets have a comfortable size and are easy to tap in both portrait and landscape. One of the things I changed, though, is displaying the menu from the tap of a button. In Matt’s implementation, you tap and the menu appears at the tap location more or less. One of the genius features is that the layout accounts for the presence of your finger, so that all buttons are visible while your finger is still on the screen. I just freaking love it! To be consistent with Matt’s first intent, I also included an option in the settings to run the app as a left-handed. It does display a different tile menu, meaning that your left thumb is not covering the bottom left tile now. Attention to details… I did play with the possibility to pan the DashPlus button by touch with a cute physics-based animation at some point, but the possibility to interact with the underlying tableviewcell was too great (and swiping left is for delete). That was bad UI, so I took it away and replaced that by a switch in the settings.
One of the big selling features of iOS 7 is typography, via
UITextKit. I did put up a brave fight to use it without Autolayout constraints, to no avail. If you’re planning to make use of it, then you will have to go with Autolayout constraints, no choice. That’s ok in the end though, and if you are reacting badly to it like me, I would recommend to figure them out in code first, and then move to using them within interface builder. My biggest mistake was probably to go to IB first, and then realize I was messing up everything because I couldn’t understand how they are built. I stand by my first evaluation of the technology though, that is that the color coding of the constraints and their graphical representation is confusing at best, and plain wrong in my opinion… That said, TextKit solves many of the problems we had with typography, and simplifies it a lot. Layout is now easy to deal with, so are font sizes (you can control them from the main settings and bring your app to be consistent with the rest of the system, that’s awesome) and font attribution.
One of the things you should worry about, though, is extended Latin. I did test a lot of fonts, many modern ones, in order to give the app a look I could live with. I’m not a typographer by trade, but love typography… which means that I can feel strongly about things that look wrong, even though I sometimes have problems expressing how they are wrong. The main problem I faced with modern foundries is that most of them were missing characters that are needed for a real universal location app. When Latin alphabets are concerned, you want your users to have the exact same experience whether they are in an English speaking country, or using one of the many European languages or dialects. The user should not have to care for it, or suffer from it. And guess what: the fonts provided by Apple, or at least the most used (the ones I checked), all have a complete character set. For the pleasure, I did try Gotham Rounded and Ideal Sans from HFJ, of course, but didn’t have the funds to purchase those anyway - we’ll see in the future, if DashPlus sells enough it might make sense, but the plan being to buy some iPads for the kids I’m taking care of brings all financial matters in a new light. One of the fonts I’ve purchased last year and truly love is Halis Grotesque, and that’s the one I’m using in the app.
Halis Grotesque is fascinating, and I can’t quite put my finger on why. It is a grotesque font, which I love in general. Sans-serif and proportional, it has all the weights you could wish for, a complete alphabet to support multilingual, and is not austere at all. It uses properly ligatures, has the small caps, and the tails are designed in a way that make it very dynamic and extremely readable, even at small sizes. I was in awe the first time I saw it on my iPhone screen: my favorite test for a font is to open it in Myfonts.com in Safari on the iPhone and check how readable it is. I can safely say that even at the smallest size picked from iOS 7 settings you will be able to read Halis without getting tired. The opposite is true of Helvetica Neue, for instance. So, I’m very pleased with the result. It’s apparently growing in popularity, I would therefore expect to see it a bit more often (at the moment I don’t know of any other app that uses it). Another thing interesting about this font: it comes from Turkey, has been cut by Ahmet Altun and is a reference to a Turkish professor of typography. Having traveled to Turkey several times, I realized that they were good at typography — I generally look closely at the ad posters in every airport I visit, and at the shop windows as well — but didn’t know about their particular history with it. I did read quite a bit about typography in Turkey, and was impressed. It feels amazing to me that the most typography conscious countries are not the ones we expect. Who would think that Switzerland, Denmark, Turkey are attached to the beauty of type and how it is used? So, Halis has become one of my 4-5 go-to fonts of choice since I’ve bought it, and even though I tried others during the course of the project, I think I’ve wanted it all the time. Having spent a few months using the app now, I can assure that it is one of the most readable in the Store, and that’s what I wanted: something that you do not notice, and lets you read the information quickly without catching your eye. Implementing some light colors as well on some actions, I had the possibility to use a different weight, so that the text 1) remains readable and 2) pops out more, without disturbing the appearance and flow too much. I think it works well in the end.
Not being a designer, choosing a color palette is really hard for me. I did try several alternatives I generated from the excellent Adobe Kuler app (really, check it out, it’s magic to me, and free I think), but in the end settled for the palette of Flat UI. The only thing I didn’t use is the switches, which were overdoing it on the small window of the iPhone, I felt. Instead I kept the built-in ones. there is one mild exception as well: I didn’t use a perfectly white background for the cells of the table view. Again, having used the app for a long time, I felt that my eyes were tiring with a high contrast, and it was appropriate to dim-down a bit the background. The dark mode, on the other hand, is completely Flat-UI colors, and works much better that a black background (I tried all known shades of black before dropping the idea). The colors of the actions indicate a real progression, and are nicely grouped by type of actions. For instance, the two blue colors are referring to the arrow actions (delegate and defer), which both pop one additional dialogue. The “move to another list” action uses the color (grey) of the font for lists in the header of the main table, etc… That is not quite true for the dark mode, where I chose to not change the color code, in order to keep the use consistent between modes. More importantly, the colors are not invasive, they are hidden most of the time, and the interface is minimal: again, coloring the whole list is not my thing, this will probably never happen, as it makes the app less readable (thus promoting color coding, but the tags are here for that).
Dropping the tap-to-edit
Removing the tap-to-edit on location was one of the hardest decisions, but one that had to be taken. I worked perhaps 2 full weeks on this feature, and decided to drop it in the end. First of all, it is really hard to get it to work consistently between the main screen and the lists. I tried to solve the problems by managing both layout, geometry and tap zones on the main screen, so that both title and tags could be directly accessible. Nope. Bad idea. Considering that I have average size fingers, I could see people with large fingers having problems with it. And what’s the point of including a landscape mode to serve people with large fingers if they cannot use the app anyway? There was another problem: I got it working easily in the list view, but the movement of the table if you’re editing a line that falls behind the keyboard was a mess to sort out. I tried managing better the keyboard dynamics, so that the table rolls at the same speed as the keyboard, but always ended up with a lag (barely noticeable after a lot of work, but still noticeable, drove me crazy). Checking out the Apple Reminders app, i saw the same problems, and finally decided to put an end to it: this table scroll was too annoying and distracting, and not working consistently depending on the height of the rows. That’s a general problem I have with iOS 7: where does the “cute” end, to be replaced by “annoying or tiring”?
Congratulations for making it to this point…. Let’s discuss the app icon to finish. I’m not good at designing icons. Not good at all, because it’s not my job. After some failed attempts in the past, I resorted to hiring designers, and after that for my own apps to simplify at the extreme. So I did put up a nice, white-based background a few years ago, and have been using it since with a simple icon/font on top. That was the plan here as well. My first scribbles wanted to convey the idea of progress from the analog DashPlus method — Patrick devised the markup so that any action can be input as a complement to the dash see his original post — but I’m not a good enough artist to render that idea of progress. So I chose to have a partial vertical bar on the dash to form the plus early on. My first attempt was completely monochrome, and I lived with it for a while. Then, seeing the new icons coming out with iOS 7, I had a strong doubt that the app icon would stand enough, and decided to implement a flat shadow theme after finding inspiration in this post. The result was quite nice, and it really popped in my iPhone screen, but… it did not reflect the app anymore. I was not sure about it, and I can safely guess that Patrick hated it (though he only offered a mild opinion, being a really nice guy “IMO I preferred the previous one”). True, when I chose to simplify the app to the extreme, why would I complicate the app icon needlessly? Didn’t make sense. I did then try to put together one version where the lines of the table would appear as they are swiped, but it looked messy and the multicolored background did hurt my eyes. Yet, trying these was a good thing in the end, as I used a difference between the background and the vertical bar of the DashPlus sign “just to try”, and liked it enough to make the icon out of it.
One of the things that came out of our extended beta-testing was that the markup was not feeling completely natural at first, and people that were not using the Dash-Plus system were a bit overwhelmed at first. Even though I remained convinced that the purest experience would be completely minimal, it was sure that one could get lost between the various elements of the markup. So, I just made another set of elements that have a small byline under, in order to remind the user of the action. This can be switched off in the settings. I also included a cheat sheet which, again, can be switched off in the settings. I think that in the end, that is enough guidance, and does not deserve the appearance and experience too much.
That’s it for now. I hope you will enjoy using DashPlus as much as I have enjoyed making it. I do have a love-hate relationship with my work, but having used the app for a few months everyday now, I feel content with the results we have achieved…
I’ll need another post to explain how I made those. Pretty neat. ↩
Oh, yes… After 4 days waiting for review DashPlus has cleared that last step happily and painlessly. We’re now live in the App Store, it should have propagated everywhere, life is good.
I’ve written a press release that is located here.
The next few days are going to be quite hectic, but we’re…
A little bit of self-promotion, as I’ve finally shipped that app. It’s pretty cool, really useful, I’m using it everyday.
Followers know that I’m a fan of Elon Musk, who I believe is the ultimate engineer of our times. Why? He takes non-conventional steps to address real problems in a way that is, more often than not, unacceptable to the establishment. The jewel of the crown is not the Tesla car, but really what he’s been doing in Space. He has built from scratch a real disruptor, and I don’t use the term lightly. At the moment he can launch a satellite for a quarter of the price, and this should drop to a hundredth when the reusable launcher (grasshopper) is finally ready. A better product, that on top of everything cuts costs?
As I was being consulted on a potential satellite, I was discussing with an expert of nano-satellites who rightfully commented: “Musk is still far from his goal, but he’s the only one who has a viable idea of what space industry will turn into”.
Skate where the puck will be…
I won’t spoil it, that kid designed something quite unique. I’m impressed.
On a side note I know more than a few scientists always complaining about not having the best gear: they should watch this. To think that the only kit I had for my first job was a microscope and a manual tensile tester… and my head and a calculator. That did work. When you’re good you don’t need much to make an informed decision. And when you’re good, you don’t need a 3D CAD system, finite elements and rapid prototyping machine to get things to work…
Have you ever wondered why freelance iOS devs work for other people, when they could be building their own businesses? Especially in booming, high growth, high excitement opportunities that mobile offers? As a web entrepreneur, I wondered this exactly myself. After all, programming is a powerful…
That’s a good point. I did freelance for a while, and all the apps that did really well had a huge marketing budget, and a design budget that was on par with the development budget. The code is “just” the code unfortunately - and I’m guessing that iOS 7 is not going to change that. If you want to succeed you will still need to have good design + good code + good marketing.
And the game is now open, with free as in “ad-free” being seriously bitch-slapped. That’s a minor victory, mind you, as this needs to be passed into law.
It’s interesting on various levels. First, it would put an end to big data, which is a good thing. It’s because people don’t care and are unable to understand that these laws are sorely needed. Second, it demonstrates that the European Parliament can indeed be useful. Third, it merges and extends some of the Members laws (that have been seldom applied though) into something more coherent and up to date. Think that France’s law “Informatique et Libertés” is near 30 years old - although legislators anticipated much, they couldn’t foresee everything (who could have?).
And finally, I can’t help but thinking of Uncle Creepy, Eric Schmidt, going into the festive season with a green troll by his side hitting him on the head with a toy hammer that rings “Pwettt” every thirty seconds.