Tuesday afternoon at Design for Mobile

Over lunch we changed the webinar connection, and got audio for the computer, so there’s hopefully now a point for anyone who wants to show video off in the room, though no one did it today.

Judy Breck asking Richard Branham a question... about what, I cannot recall
I missed the beginning of Richard Branham’s talk as the webinar computer sorta crashed, so I had to decide to leave it alone, and then go find another one and beat it into getting on the network.

His talk was about design philosophy, as it relates to the work he does through the KU IxD program he runs.

He mentioned my workshop yesterday (and book) as a part of his “representation” triangle. He’s big on drawing to design. There are many ways to represent a situation, and it’s one of the most important skills (as a designer I guess) you can develop.

Evaluate and construct – how to represent people’s theory and understanding of how people perceive their environment. Draw a map of the city of boston, blind. This is second order of understanding.

Situation oriented, becomes situated cognition.

Stopped blogging. Can’t stand most people in IxD. Too much sizzle, by which I guess he means talking, not doing. Needs more steak.

Situation is about the way people make sense of their encounters with other in everyday live, and how these interaction between social actors are built into more stable routines. George Herbert Mead is someone you need to look up.

Was a systems designer. And the systems worked, but they didn’t /work/. Because, he came to discover, he didn’t understand the situation and meaning.

His definition of interaction meshes well with my current version of it for our work, where interaction is not the digital bit, but the space between the electronic device and the user. John Dewey was writing about Iterative design, and human centered process around 100 years ago! Interaction, from this same era, “is going on between an individual and objects or other persons.”

He yelled at one point “there is no such thing as experience design!” We can do stuff to /facilitate/ the experience, and design the scaffolding, but the person has the experience. Maketools.com, someone smart in the northern-european style participatory design movement back when, and worth reading.

“And I think Steven is starting to hit the nail on the head with his book…” as far as non-standard representations (neat!). Constructing understanding is key, how as a designer do you construct an understanding (which is where the meaning is). Reviewed some design which he did to represent in easier to comprehend manners the impossibl depth and complexity of large museums. Information Design is rooted in museum design in many ways, so I love this stuff.

All Clear is a program I’d never heard of that builds dynamic representations of relationships like this.

If this is too narrow, he also did a re-signage of the Sears tower using similar concepts. And they didn’t start by drawing signs, and picking which one they like, but the form of the signs emerged from the process.

I went to art school at KU, and knew him vaguely as a rockstar designer back then, so this was all especially cool to me.



Next up was France Rupert. I worked with him (and for some of it actually employed him) for years at Sprint, and he’s even mentioned in my book. He’s always been a great evangelist for things like style, semantics, and the right way to do things.

So after I heard some people say they had a thread (on some forum or other) with 200 responses and no definition of what semantic markup even meant, we invited him to mention why it matters for mobile especially.

Pretty much his first slide was “The good news” that good mobile web dev only really requires an understanding of desktop best practices in XMTHL/CSS, and so on. This is good because you don’t need to create mobile web developers, just make sure you have good, on the ball, desktop web developers who keep up to date.

A formal definition of semantics is “the meaning of the element or property in relation to the content which it describes.” His definition is just that “content is /in/ context.” Which I love. Anything contextual is good to me.

Markup structure can enrich the content. His examples are with gestures and intonation and inflection for speech, which is I guess not what we’re talking about as yet. But even emphasis and type and such do influence the meaning and understanding of printed text.

I think he had a pretty good walk through of why style-in-html markup is bad, and will be sending this to some client development teams in the future (if Barbara will let me).

I also thought a few other things (why tables are only for tabular data, etc.) were well done, but there was someone lost on the twitter. This made me happy, however, as others answered him /on/ twitter. Two links shared were http://www.jeffrey-shaw.net/html_main/show_work.php3?record_id=83 and http://en.wikipedia.org/wiki/Semantics.

The blockquote discussion was a good example. Because the default browser behavior is “indent this” it means “indent this” to way too many people. But it should mean “quote.” He sorta breezed through a step by step html-elements-for designers slide, in favor of talking about the important variables and constraints that mobile encounters. And about my favorite again, context. He had good phrase that mobile users are more likely to be information-seeking. I think I like that more than my usual description, of task based.

At the break I didn’t post this, as instead I spent the time restarting all the webinar computers, so on to the late afternoon sessions.


Jeff Sonstein had a neat something (twitter?) feed before his session started, and brought us all conference swag. He runs a (new, rough) Center for the Handheld Web, and is on the W3C mobile web best practices. So I guess I should mention my recent blog post series if I want a big discussion.

The web of tomorrow will /not/ be the web of today. So he’s here to talk about that. He thinks widgets (most of them) are web apps, because a browser is not key to it. Structure is key. HTML, CSS and JS are the holy trinity of the web.

Here it is again, context. Mobile have a small screen, intermittent connectivity and the different way of interacting (small buttons, etc.). But also additional features and scope, location, personal data, etc.

After a pause for more technical issues, Jeff explained a distinction between a resident app, and a non-resident app, meaning a web app. Every developer should be able to make a cross-platform web app.

The mobile web app best practices all look good, but I was too caught up in the continued technical issues to type them out. He had some good notes on the UX stuff, like design for multiple interaction methods, improving /perceived/ performance and preserving focus within a page on reload.

Anyone who develops websites and doesn’t think internationally is dumb. Put +1 in your phone number links (for US residents, of course).

Ensure as much consistency between desktop and mobile web. The catchphrase is of course OneWeb, not one for big things and one for mobile. I still think I am in favor of some n-web level, to allow for content, ia and interaction customization for different device classes. But I can see myself getting there if smart enough rules sets can be set up.

He touted SVG, which would be good, and the canvas tag, but I’ve never heard of that one. Have to look it up.

He says WURFL sucks, because browsers lie so you can’t trust the UA string. Client side capability detection can be useful, and DOM injection can allow “graceful improvement.” Ask him for code to do this.

Big proponent of XHTML+RDFa as a solution to semantic html as France just presented. Read more at www.w3.org /TR/xhtml-rdfa-primer/.


I decided it might get in the way of my presentation if I stopped periodically to take notes, but it went better than I’d have expected. I didn’t go over time, but the questions had to be cut off. And they were good questions, like Judy asked about the future of home pages as a whole concept.

Check the slides out here if you want to know what you missed, except for the notes that make it make sense, and my dynamic presentation.


Madhava Enros reviewed Fennec (and shared his #fennec hashtag as well as the #des4mo one). It is a codename. It’s a small fox for anyone who didn’t know. Get it? Will be “mobile firefox” or similar when launched for real.

Nice set of sort of design requirements, their vision is shown here htttps://wiki.mozilla.org/Mobile/FennecVision though he had it in a nice bullet list format. Follow on “initial design themes and goals”
-Max screen space dedicated to content
-Minimize typeing
Give primacy of interaction to fingeroriented touchscreens
-Support the quick lookup scenario

Pretty rapidly decided to merge the URL and search fields. All these designs are available on their site if you want to see it without the whole slideshow: https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/Proposal6

Chrome disappears at idle, and they solved it with gesture, mostly touch and hold, to bring items back into vision. Yes, it all has tap, swipe, double-tap zooms. Tap and hold both shows the title bar and one of those pie menu things if you click in the middle (these usually annoy me), tapping and holding in the corner pulls a menu like a softkey and so on.

Decided to toss it because hold starts feeling like it takes forever after a while. Also, they were worried about how add-ons would work.

The touchbar was another proposal, where the bar scrolls with the screen and tapping these corner things pull up a wide-curved bar across much of the bottom of the screen. The actions button opens a series of other items, so that’s the add-ons.

Decided not to go this way, because they were getting tired of overlays. As soon as they made the corners small enough to get out of the way… they were out of the way. And then someone else was working on ZUI, or zoomable UIs.

In this, there’s a series of tabs in space, and you click to get a full-screen view of each one. Spatial relationship, not just a carousel, is interesting here.

They ended up with a lot of focus on their “awesome bar” and sharing between desktop and mobile history and other intelligence (via Weave) to shorten typing and predict what you want to do. And, by allowing dragging sideways, so like where you see that gray frame side effect on mobile Safari, they put stuff there. Not bad.

Using CSS3 allows them to use (so far, it’s still experimental) programmatic buttons, progress bars, etc. instead of making zillions of things in Photoshop. Also, smaller, and zoom readily available in each browser.

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image