This year, everything should go “Touch-first”

Happy 2017!

I’ve been considering buying an iPad Pro. I’ve always felt that the iPad is an "in-between" device that can’t fit my life well. But there is proof that the desktop is getting... deprecated. Here’s a good article from The Verge that talks about it.

Is it time to transition over?

By the end of 2016, many major websites saw traffic shift from desktop to mobile. Mobile has become the dominant form of computing for the every day consumer.

From a platform perspective, native apps started to transition over to web experiences. Hopefully, "Progressive Web Apps" will replace the generation of native content apps we have today.

What we didn’t seem to have gotten around in 2016 was to really question our approach to mobile and touch. Our approach remains primitive. We pick up interactions like "text editing" and try to retrofit mobile into it. We don't question the fundamentals to ensure the new experience fits well. I can’t help but feel that “keyboard covers” are a grave mistake.

Consider how someone uses a mobile device. He/she would be leaning back on a comfy couch, holding on to a tablet with both hands. Or, they may be standing in a crowded train, arm wrapped around a pole, trying their best to type with the two thumbs. The users' posture and environments above doesn't allow for a traditional editing experience.

We have to be more creative with the solutions we engineer. If we do transition well, these touch-first solutions should make us more efficient!

Also consider the change from a mouse to multi-touch. Direct manipulation of objects could be amazing. We see some of these interactions when we use apps for drawing, photo editing or maps. But more mundane tasks, like text editing, never seem to get much of a boost from touch. We seem to staying on safe ground with rows of buttons to carry out functions. We spend significant time manipulating and navigating between elements. Yet, these tasks tend to be not touch friendly; at least not enough to be more efficient.

It feels like we transferred the interaction to mobile, instead of converting the intent. We should be evaluating the purpose of every task and attempting to accomplish that in a "touch-first" way.

It seems that we have some ways to go before we get really good at mobile and touch. I’m hoping for a 2017 filled with ideas and techniques that shifts our thinking. I’m hoping we build products that are thought from a touch-first (or even touch-only) perspective.

My 21st century wedding proposal with Paper for iPad

Proposals. Oh man. So much pressure to get this right and it is filled with social expectations! Having dated Dinusha for 6 years, it was my turn to pop the question. I honestly just didn’t want it to be lame.

After months of back and forth with a jeweller, I got the ring. I wanted to propose in a secluded beach. I picked Kingscliff beach as the my winner (Cabarita would have been good too).

I just felt like this proposal needed something more. It needed something that really speaks for the occasion and reflects who I am. Plus, I knew the ring wasn’t going to be a surprise. Having an extra element would be a lot of fun.

No, not a flash mob!

So I turned to my iPad.

This is “Book” by FiftyThree

“Book” is an accordion style printed Moleskine book. First, you have to digitally illustrate the pages using the “Paper” app. Then all you have to do is to pick and arrange the order of the pages and hit "Print".

I've always loved drawing. While illustrating a whole book takes a while, I felt that using a little bit of technology would make this a lot more reflective of who I am. And more fun! So I decided to give it a shot. I used the "Pencil" stylus (as you may have guessed, also from FiftyThree as well, given the super creative names) to illustrate on Paper for the Book.

I started the project by brainstorming ideas on what life events I should illustrate. I included things like the first time we met and talked, our Europe trip, favourite hike, our ‘alter ego’-toys which kept company in our 3 years apart etc. And finally a place to pop the question and make this contract binding :).

I ordered 2 copies — one of her and one for me. The order arrived just 2 days before the proposal! phew

I managed to find a secluded part of the beach. We sat on a sand dune with two apple ciders and some Noosa chocolates and watched the waves. Afterwards, I pulled out the book and reminisced through the pages.

The book was a complete surprise. She took her sharpie out and wrote “Yes”. Yay!

It was a month long effort. Drawing, erasing, redrawing, colouring and editing. It took me a while to understand and work around the limitations of Paper app. Towards the end of the project, I had developed a certain style in the drawings. There was a common theme running across with the “heart strings”. This caused me to revisit some of my initial work and redo them.

The best part for me is that I produced a piece of work that was truely cherished by Dinusha. Hopefully, it is something she could, keep forever. I think it spoke a lot more than the ring.

The engagement book was unique and creative. It reflected my personality well. While it is very much an analogue creation, I was still able to back up the digital drawings to Dropbox and iCloud.


Mobile First Design

If you are designing for many screen sizes, where should you begin?

Traditionally, most designers will start the design process at desktop size. This is where most content is going to fit in well. Then you figure out how to squeeze it down to a tablet, then a phone.

I believe this is the wrong path to take, when designing a mobile responsive page (or any website for that matter). Just because a desktop page can flow responsively on a small-width screen, it doesn’t make it suitable for mobile.

The best thing you can do is to start with a mobile design. Straight away, you are met with a conundrum: how do I fit all this content into the tiny screen? You can no longer just drop a matrix or a data table on to the screen — there really isn’t enough space.

You are forced to think about questions like:

  • what you are trying to do?
  • what are the most important elements a user needs to interact with?
  • what is the most important action that needs to be taken after viewing the content?
  • can the content/data be summarised and simplified?
  • can you offer a better way to drill down to your content?
  • can my data fit into an existing metaphor (like a map or a calendar)?

Once you are done with the design process, you might have a crazy realisation: all the questions you asked yourself, and the resulting design decisions you made — they apply on desktop too.

That’s right. A good design is already responsive.

Now, desktop design becomes more about enhancement over a lazy content dump. You’ve already made the decision up front on what is important and what is not. You no longer feel dirty, having to add ‘small-hidden’ css classes everywhere.

Start with a mobile design on your next project. Your design will be better for it. When you pick tools like the responsive grid, pick one that starts with mobile too. Bootstrap 3, for example, switched gears to do exactly this.

Responsive is hard. Mobile is hard. But the thoughtfulness and effort we put into what we build will delight our customers. And our customers are the reason we exist.

Apps that grow with you

It's difficult to make a good app. But it's even more difficult to make an app that grows and matures with the user: something that starts off basic and overtime, as more knowledge is shared between you and the app, more in-depth features are revealed to appeal to a more mature, advanced version of you.

Thought I had while discovering something completely new after a week of using the Jawbone UP fitness band.

Transient

Designing 60Hz 2.0

I love watching TV shows. I spend about an hour a day on it at least. It’s not just TV, I love movies too. I love the stories in them. It is another world of imagination where there are no limits. I gravitate towards shows which have a long running story, like Game of Thrones. I appreciate the sense of continuity they have. These shows offer a way for me to escape my busy work day when I get home.

In the December break of 2011, Suneth and I were geeking it out trying to solve a very small problem we had with TV: I find it hard to keep up with the story. Often, the episodes aren’t in order. Even if they are, you tend to forget it a little here and there. Busy life gets in the way of tracking these things. So we decided to make a little iPhone app, called tvQ, to keep track of where you’ve watched something to.

So tvQ 1.0 came out. We drew inspiration from apps like Series Guide for Android, which I had been using on my Nexus One. We got some traction after Justin from Trakt.TV approached us for an integration. 50% of our users are from trakt, the last time we estimated the numbers, which is a huge deal.

tvQ v1 is slow. It suffers from slowness brought on by Core Data Framework. We probably didn’t know the right way to go about it, to be honest. It is designed with stock standard iOS controls, which look dated now. We wanted to give it some love and write it in the architecture some of the bigger enterprise grade apps are written in. We wanted it to be fast and focus on the user experience a lot more this time. Other apps for trakt were copying our front page so we thought... let’s make something better! (Haha)

Coming from Momento Jar app, we had sharpened our iOS + Design skills. We started sketching out some of the early designs as you can see here (and some early photoshop mocks):

These screens represent some of the thinking gone behind the new design. Initially we wanted to take the 1.0 experience across where we focused heavily on just a single list of shows with their next episode. A lot of the times, this design didn’t always perform well. We realised the main page was more about episodes and less about each series. So we spent time crafting the front page to be episode centric.

Now, episodes from each show are put into 3 buckets.

  • We always show you what’s on today. They don’t have to be next in line. It is to say... hey these shows are on today, which might spark your interest to catch up or just see where it’s at now.

  • Next is upcoming, which is what I look forward to in the coming week. I get some of these stuff online so I keep an eye on these. Sometimes I like to read in advance and see what’s in store for the following week (I skip ads on TV so I don’t see the previews). I can limit this section by saying don’t show me if the next episode is 6 weeks away or more. When Suits is returning in a few weeks time, it will start appearing on the list again... which is exciting!

  • Same goes to past episodes. The thresholds you set for yourself allows shows you neglect to fall off the ledge and stay out of your way. Make sure to set these up in your settings when you get the app.

We added a proper library for you to collect shows. Made it so that you can ignore missed episodes for shows like CSI where you don’t care about watching every single episode. We made comments part of the synopsis page to see immediate reactions from other community users (trakt only).

iOS Simulator Screen shot 22.04.2013 8.06.47 PM.png
iOS Simulator Screen shot 22.04.2013 8.08.02 PM.png

One big change this time around is artwork. We put fanart and posters in the center of everything. This doesn’t mean we compromised on design at all. They elegantly fit in and add color to our app. You will realise the app is white for most part, with neon styled icons. The rest of the colors are really added in by the great artwork, giving color to every page. Our experience with Momento Jar really helped out here. There’s a bit more technical knowledge involved in caching, cropping and animating images to get the most out of them. If you get the iPad version, you will see that the obsession with great artwork continues. We hope you love it!

iOS Simulator Screen shot 22.04.2013 8.50.57 PM.png
iOS Simulator Screen shot 22.04.2013 8.29.36 PM.png
iOS Simulator Screen shot 22.04.2013 9.00.26 PM.png

We did a lot of work in the backend too. It is a brand new codebase. We threw out everything we had before and made everything super fast. We used the Command & Engines architecture (future blogpost...?) to organize everything properly.

In the end, we’re very pleased with the result. I think this is a world class app, for both iPhone and iPad. It is made with love by Suneth and I, who uses the app on a daily basis. We hope our effort will convert to a large number of downloads. Tell everyone about it! It’s available 10th of May. Our app experience puts us firmly in front of the TV tracking apps out there. We intend to be creative with our features in the future releases. If you have awesome ideas of your own, head on down to our 60Hz page and start a discussion about it. We love hearing everyone's take on the app and the community support.

Thank you for reading. Here’s the end result (we felt serious about the app that we made a video about it!!!). Tell your friends... iPhone app is FREE on the 10th!!! :)

Why Design is Important

A lot of the time, design is a step that is left up to the developer working on a feature. He/she is given full liberty to make a decision on the user interface. Often, there is not enough to make an informed decision on the UI, even though he may be capable of coming up with something aesthetically pleasing. Spending time on design can feel like a waste of time, effort and ultimately, money. This is, of course, not true.

Design is where marketing, sales and brand meet the product and its platform. It is the round table where all departments can sit down to have an equal say on how a product’s development effort can be be part of the bigger story.

A designer can interpret some of the abstract thinking behind features to produce a consistent design, which in turn can be interpreted by the technical team. A designer’s job is a lot more complex the just coming up with a fancy UI. He has to worry about the narrative, and ensure that the UI reflects on the spirit of the product.

Event a tiny feature like a word count in your word processor product can be a complex decision. You could

  • Have a count in the status bar of the app
  • Hide the operation in the tools menu
  • Toolbar item
  • Context menu when text is selected

The right decision can depend on a number of factors like user stories, target audience, client requests, estimated frequency of usage, new target markets etc. If you look closely, Google Docs chooses to hide it in a menu while Word has it in the status. Reflects well on what each product tries to achieve.

At the end of the day, UI is how your user forms a long term relationship with your product. The message you carry is important for this relationship to grow. A solid design process can go a long way.