Apr 30

More mobile UX; The power of dashboards, notifications and raw beauty

Mobile, Tech, webOS 3 Comments »

As webOS grows up, developers learn more about the platform, and together we build commonality into our apps. I have talked about various gestures and practices that are both built in, and have emerged.

I have seen some very interesting advanced uses of our notification system recently and wanted to share.

birdwatch

First up is birdwatch a “background app” that polls your Twitter account and when new tweets come along, they are shown in a dashboard component at the bottom of the screen. You can simply tap that area to move through your tweets. Very nice indeed, and something I would love to see in our email client, and in the Facebook app. The feature has been added to our list.

It is a great and simple example of how you don’t need a full app for every use case, and remember: those areas are DOM windows too so you can make them do a lot! We have seen other core examples such as the media player controls, and I also look forward to seeing the Facebook app be able to accept/deny friend requests right there. What would your users want to do rather than be sent into the main app indeed? That is the question.

jotit

Then we have Jot It, a note taking application. What makes it different is again in the dashboard area. When the dashboard is activated you see a bottom UI bar that gives you quick access to your documents. A creative way to add the UI.

It does have issues, in that you only really want this if you REALLY care about notes :)

tweetme

Back to Twitter. I have really been enjoying Tweet Me a new application that just got released into the catalog today.

One feature that fits into the notifications meme is the banner notification UX flow. If you type in a tweet and back gesture away instead of a dialog “are you SURE you want to leave that info?” the app does something very nice indeed. It saves a draft AND gives you the option to delete that draft right in the banner. It’s a small thing… but one of those touches that shows that the developer really sweats the small stuff.

I am really excited about this application in general. It is beautiful and really showcases how webOS apps can be gorgeous. The technology is there, and this app raises the bar for all webOS applications.

Check out the splash screen, the favorite tweet star animation, picture thumbnails and more. Take a quick look at the flow below:

Man, we have an amazing set of Twitter apps now. They each have their own feel and niche too. Bad Kitty is fantastic. And then there are Tweed and Twee and Spaz (fully open source) ….. the list keeps growing. A strong bench.

What other mobile apps are inspiring to you? Other practices?

Apr 28

Just Type. One of my favourite platform metaphors.

Mobile, Tech, UI / UX, webOS 7 Comments »

type

In my feeling touch-y post on some of the fun usability issues and opportunities, I touched on shortcut keys.

As I have continued to learn more about the webOS platform, one of the biggest changes for me has been knowing that a physical keyboard is available.

gesture-facebook

This is why we put in shortcut keys for the Facebook app. I can now very easily jump to an area of the application by touching the gesture area and pushing a key. I would love to see shortcuts available in many other webOS apps, and a “GreaseyPalm” (greasemonkey type system on webOS) would be awesome… enabling me to easily tie my own in… but that is another story :)

Other than shortcut keys though, I have found more and more applications using the “Just Type” metaphor. It turns out that many apps can be smart about what a user would want to do if they just type.

justtype-facebook

We implemented this on the Facebook app. If you are on the news feed and you start to type, assume that this is a status update, pull up that UI and put the content in there.

justtype-badkitty

Bad Kitty and other Twitter clients do a similar thing for assuming that you want to Tweet something.

justtype-launch

My favourite example is in the core launcher itself. I remember being incredibly frustrated with home screen layout on the iPhone, and on webOS at first. Having to move icons around on the phone is a pain. I was excited when they added the ability to manage apps in iTunes, but the UI manages to be just about as frustrating in there.

It took me awhile to realise that I don’t need to use the launcher in this way at all. I can just type, and it will find the app I want. Hmm, where have I seen this before? Quicksilver! Ubiquity! Those examples go even further and offer actions that are even pluggable and scriptable… which would be awesome on a mobile device too.

This is yet another item on my checklist when I build an app. If the user started to type right now, could I do something smart that just works?

Just Type. Check!

Implementing Keyboard Shortcuts

A few folks asked about keyboard shortcuts. To implement them a la Facebook, you simply use the shortcut attribute for actions in the

        var appMenuModel = {
            items: [Mojo.Menu.editItem, {
                label: $L("Preferences & Accounts"),
                command: Mojo.Menu.prefsCmd
            },
            {
                label: $L("Navigate to..."),
                items: [
                {
                    label: $L("News Feed"),
                    command: "gotoNewsFeed",
                    shortcut: 'h' // H = home
                },
                // ...
                ]
            }
         }
Apr 22

Mike Hanson, Douglas Crockford, and Facebook; A tale of security, privacy, and performance

Facebook, Tech with tags: 2 Comments »

sayinglike

Facebook announced a lot of bold moves at f8 yesterday. It was exciting to see Bret Taylor (who I had the pleasure to work with at Google) do such a great job on stage, and with the platform. There are many implications that will ripple out from this news, and here are some of my thoughts:

Act One: Security

At JSConf, Doug Crockford came out in his talk, asking to do an ECMAScript 4 to HTML5. Stop it. Block it. Go back to the table and fix the Web security model.

He must have had a giggle when he saw the new Facebook “Like” button. It allows anyone to throw a Facebook like on any page. I quickly put it up on Ajaxian:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px; padding-top:8px"></iframe>

Note how you pass in the href of what you want to like. I am getting the URL for each post and plugging it in. However, you could put any URL in there, as folks quickly discovered. Isn’t it fun to have a like button on content that actually likes some XXX porn. You like innocuous content X, and your wife looks at your stream to see that you are into a dirty movie.

As soon as you iframe in the world of Facebook, the page in question gets the power to get content into your graph and stream. Ouch. Not good.

The UI should at the very least see if it is liking a URL that isn’t the same as the main window.location. If it is exactly the same page, when you hover on “Like” it could say “this exact page”. If it is on the same domain it could say “a page on this site”, and if it isn’t on the domain…. ALERT ALERT ALERT. Since Facebook knows who you are, why not even let me set what I want to do here?

It is also frustrating that I couldn’t easily change the look and feel. Neither “light” or “dark” themes work on Ajaxian for example. I hope that power user features are added, so you can set the colors for various elements without having to go low level and do everything from scratch.

Act Two: Owning My Data

When I look at how we add the “Like” in the browser, we see the code smell of an iframe to an external site. We see this in other forms too, such as script tags pointing to Google to get a Google Map. This feels utterly wrong to me. Instead of a code snippet that points to a particular service, I want to declare what I want to see.

In the case of “like”, let me just say something such as:

<div class="data-like"></div>

Then some JavaScript could come in and augment this to be the iframe, OR the right thing could happen. The browser itself could take over and understand the semantic meaning here.

Imagine if around the Web we had:

<div class="map loc:xxx,yyy"></div>

Rather than the Google Maps, Bing Maps, Yahoo! Maps snippets. If a cool new maps startup came along, I could change my maps provider in my browser, and ALL maps would be shown using the provider of my choice. Much better.

I want to see the same for “Like” and other social data. The browser could then know what services to ping with the like. For example, perform a “like” on Facebook, a retweet on Twitter, and a bookmark. That data could be stored locally, and I am assured that I can always have it.

This leads me to Michael Hanson, principal engineer at Mozilla Labs. Mike and I didn’t even get a chance to really overlap at Mozilla, but I met him before I left. He is a killer engineer, and someone who is going to have a profound effect on the state of identity for us all.

His early work, in alpha-ish stage, is around the notion of contacts in the browser. This add-on is fantastic. Contacts are consumed from Yahoo!, Facebook, Google, etc (a la Palm webOS Synergy) and people are first class citizens (e.g. person:[email protected], person:http://facebook.com/btaylor). With type=”email” you can auto complete of your friends. He already uses the new Facebook Graph API which is a dream to use compared to the old REST/FQL. I hope it is more solid too. Anyway, these are just a few of Mike’s features. Firefox is about to get very social.

So, the browser should be the universal like machine. Not Facebook. Not a service owned by a company. You. Your browser. You own your data.

Facebook continues to change your privacy policy, and the EFF just spoke out again: Facebook Further Reduces Your Control Over Personal Information. Some claim that ad companies do this and more already, tying it together sneakily on the backend…. but changing your privacy and making it OPT-OUT is terrible.

Act Three: Performance

Alex Sexton pointed out the performance side of a like button:

From what i can tell, a single facebook like button requires at least 12 unique requests and ~1 second of load time.

The button adds ~161 new http requests to this page on Levis which is ~4sec

Compare the difference in when onload kicks in via iframe compared to via JS.

Time for Steve Souders to do a P3P? :)

Again, if the browser handled the notion of like, we wouldn’t have this issue. Also, what if instead of a million iframes, we all loaded one set of JavaScript from Facebook, and there was a JavaScript function that would let us put the like content into a div. To optimize, we could pass in the set of URLs to ONE JavaScript function and get one set of metadata back. Then we have a function that adds the right HTML to a div. No matter how many like buttons you have. One request.

We could go the OpenLike route, but we don’t want a huge list of buttons and another resource to deal with. Let the browser do it. We don’t need to see a world of this. It is broken. Time to wake up:

whatahack

Chris Messina has some words on the subject too:

When all likes lead to Facebook, and liking requires a Facebook account, and Facebook gets to hoard all of the metadata and likes around the interactions between people and content, it depletes the ecosystem of potential and chaos — those attributes which make the technology industry so interesting and competitive. It’s one thing for semantic and identity layers to emerge on the web, but it’s something else entirely for the all of the interactions on those layers to be piped through a single provider (and not just because that provider becomes a single point of failure).

I give Facebook credit for launching a compelling product, but it’s dishonest to think that the Facebook Open Graph Protocol benefits anyone more than Facebook — as it exists in its current incarnation, with Facebook accounts as the only valid participants.

As I and others have said before, your identity is too important to be owned by any one company.

Apr 21

Finally. The perfect iPad stand.

Apple, Tech 3 Comments »

mbpkeyboard

It has been a lot of fun to play with the iPad since it came out. I tried it out at work a bit, assumed the lean back position on the couch (its forte), and used it on the trip to JSConf. I think it is a fantastic device, and love the touch-y feel-y. I have gotten past the phase of “using it because I have it” and now actually make fun of myself when I use it in certain situations.

For example:

  • Watching a movie in bed at the hotel room. Finding myself propping up pillows
  • Holding the iPad on the flight. For hours. Holding

I think I have found the ideal iPad stand. A Macbook Pro keyboard. There isn’t anything new here. Other tablets have allowed you to do this, but I think for me the iPad will make sense when it is just part of my laptop. Let me boot to the open Mac OSX or the closed device OS. When I pull it off of the keyboard, it is an instant iPad.

This will come in due time, and that will be exciting. Right now, I have the feeling that I could easily go weeks without really using the iPad. We need a phone. We need a laptop. The iPad is a fun gadget toy, but will evolve to be part of our computing life.

That being said, I got one for my mother and it has been been perfect. She is mostly consuming media with the odd emails and the like, and now she has a device that she isn’t scared of. Fantastic. And, as Faruk Ateş points out… there are a lot of folks like my mum. Vast majority? And then there are the kids… on their iPod Touches… learning The Way.

As an experiment, I put the iPad on the couch and watched my son come in (had never told him about it, or that we had it). The newly four year walked up to it, unlocked it, found a game, and started to play. No manual required. The iPhone has trained him.