Socks and Sandals (and software-development faux pas)

Photo by Markus Spiske on Unsplash

I’ve worked with a lot of clients and potential clients over the past 10+ years. Sometimes, in conversation about a project, the client will roll out, oh-so-casually, one of about 10 pat statements that reveal a pernicious and erroneous belief about the process of software development. Now, most of my job involves educating clients so I take a deep breath and wade into the waters of a software-development ideation faux pas, of explaining why what the client has just said is analogous to pairing socks and sandals: Sure, it makes sense on one level, but it’s never a good idea. (Note: I’ve been chided by our development team that wool socks and Birkenstocks are certainly acceptable and that Keens and short anklets are also acceptable. I sigh. I choose to fight my battles one at a time. . .)

Moving on.

The objective here is to give the audience a bit of quick and dirty insight that, I hope, will help clients be . . . well, better clients. Better clients always, without exception, mean a more successful project — cheaper, faster and far, far fewer hair-tearing-out incidents. (more…)

Proofing the App

Image of old Magic Yeast product

I wanted to make calzones for dinner last night.  It was getting late, but in my mind I could already see the ricotta and broccoli filling and smell the melted cheese.  I usually buy a blob of dough from one of the local pizza places, but this time I was going to start from scratch.  The yeast, though, gave me pause: would it rise?

In baking, there’s a concept of proofing the yeast.  A baker is never certain that the yeast is still active, and it’s a sad day to anticipate and work on bread only to find a small hard lump of unrisen dough at the bottom of the bowl.  So before kneading in flour, the yeast is mixed with water and sugar.  If bubbles form, it’s working and you carry on; if it stays flat, you toss it out and avoid heartbreak.

My yeast did foam, but so slowly that I would have been eating my calzones somewhere around midnight.  So instead I shifted gears and made soft buttery pretzels, which don’t need to rise for so long, and they were delicious.

What’s the connection to software development?  App ideas need planning and proofing, too.  There’s little worse than spending large amounts of time and money creating a beautifully finished product only to watch it lie unused.  That expenditure might be avoided with development’s form of sugar and water: requirements, design, prototyping, and a minimum viable product. (more…)

Semantic HTML

Software screen capture

The above diagram shows two ways to place a grid on an HTML page. The <TABLE> version on the left is the old school way of managing layout. The web was positively littered with such code before widespread use of CSS (and browser manufacturer adoption of standards), which freed designers from use of tables or framesets for managing layout. The <DIV> version on the right is a sample of modern accepted practice, specifically in this example, using Bootstrap 3 styling.

You will find no one suggesting using tables for HTML layout (except when it comes to formatting HTML email. It’s ugly out there) today. Many a rant exists on the web exhorting all to separate presentation from structure, yet aren’t the two examples shockingly similar? Can the <DIV> version be that much better, when it looks like a one-for-one mapping of one element to another?

To answer the questions asked in the image, yes, the HTML on the left is bad layout and the sample on the right is OK. The reasons behind the answers come with an understanding of semantic HTML.

(more…)

Float Label – From Shot to Repo in a Day

In late September Matt D. Smith posted a shot on Dribbble of a mobile interaction pattern that he was working on with the goal of improving mobile form usability.

Software screen capture

Float Label Form Interaction – Matt D. Smith

In the shot he’s subtly animating placeholder values so that they change color and “float” above the content as text is entered into the respective field. As the text field loses focus, the label changes back to the default gray color. In “How the Float Label Pattern Started” Matt goes into more detail about the thought process behind the shot and links to critiques of it as well.

These days in mobile any new interaction design patterns are interesting, but this one is even more so to me because of how the open source community took hold of the concept and within a few days put together implementations for iOS and the web. These are linked to from Matt’s blog post and you see examples of their use in real world apps by following @floatlabel. It’s awesome to see this kind of collaboration and iteration in the open source design and development communities.

Check out the shot, Matt’s post, and if there’s not an implementation of the pattern for the platform you’re working on contribute your own and experiment with it to see if it makes sense for your mobile app.

Designing For An International Audience

World Map

Reaching global audiences

The more I travel, the more I realize there are few things in this world that can be universally translated. "Hello!" works everywhere, that’s a given. Smiles are safely accepted world wide, or at least, in the places on my personal bucket list. And luckily, the word "coffee" or anything sonically resembling it will result in a cup of joe. Currently, I’m sitting in the garden of an art hostel in Sofia, Bulgaria, sipping said cup of joe.

Being the design junkie that I am, I always take note of signs, flyers, posters, ads and local magazines and realized graphic design aesthetics differ from culture to culture.

Initially, I sketched this post as a comparison of visual design among the varying cultures, but then I thought – how does this effect web design? We have the technology to sniff users’ locations and dish up localized sites, but a better approach would be to find a common ground that works across borders: technically, aesthetically and otherwise.

(more…)