Category Archives: Design

Sigils, Swastikas and Symbology

Design, Graphics, Graphs

Came across sigil in some technical documentation (https://github.com/apple/swift-evolution/blob/master/proposals/0029-remove-implicit-tuple-splat.md)

https://www.google.com/search?q=sigil : “an inscribed or painted symbol considered to have magical power.”

On a related note, after reading The Long Ships I though the name of one of the characters – Sigrun – was kind of neat since in Old Norse it means “victory rune”. However, the rune itself was horribly co-opted by the Nazi SS (the all-too-familiar double lightning bolt design, featuring two of them).  That is hardly the only example.

Years ago, my aunt presented a slide show from her travels around Asia. It was surprising to see “backwards” swastikas prominently featured on Buddhist temples. She explained their long history in that part of the world. Despite Japan’s alliance with Nazi Germany in WWII these weren’t remnants of that time.

However, now there is a Japanese proposal to substitute another symbol on maps for tourists (prior to the 2020 Olympics): http://www.bbc.com/news/world-asia-35349619. Farther in the body of the article there are, indeed, symbols that might benefit from a change, such as the encircled H, which to many might suggest an emergency helipad rather than a hotel. However, I’d be inclined to keep the swastika since if far preceded use by the Nazis and runs the other direction. In a way, it symbolizes the opposite while reminding us of the negative aspects of human nature.

JQuery HTML5 custom attributes

Design, HTML5, javascript, User Interface

I came across what looks to be a good solution to managing UI elements (visibility, opacity, etc.) without resorting to burying styles in an attached CSS file. With HTML5, you can use custom attributes prefaced with “data-”, e.g:

<h1 data-groups="foo, bar">I have a session code</h1>

<p data-groups="bar">Enter it here to join a session</p>

You can extract that data, for example:

<div id="divNewSession" data-groups="foo">
var groupData = $("#divNewSession").data("groups");

Which would generally only make sense with something specific, such as a the DIV in this example. But you could also act globally on various elements that all share a data attribute, such as making them all invisible. You can even differentiate with keyword searches or a wildcard (contains) search:

// Any element with a data-group attribute containing "foo" will be affected
$("*[data-groups*='foo']").css("background", "black");

// Any element with a data-group attribute only containing "bar" will be affected
$("*[data-groups='bar']").css("background", "red");

Note the * after groups in the first example. This will act on any element even if the data-groups attribute contains more than just “foo”. Also pay careful attention to the use of double vs. single quotes. IE and Chrome didn’t care, but Safari did.

I like this approach because:

  • It’s easy to see the relationship between an element and an attribute
  • The relationship isn’t buried in an external CSS file or deep within a pile of javascript code
  • It doesn’t clutter up a CSS file with miscellaneous styles used just to control temporary states, e.g: 
    #divNewSession { visibility: collapse; }
  • It’s flexible. An element might be affected in one case, ignored in another.
  • Use of a custom attribute avoids confusion or collisions with any other code or namespaces

Towards More Positive Ratings and Useful Feedback

Design, User Interface

The developers of  the Circa News app recently posted an article describing how they’ve successfully increased positive ratings and directed user frustrations to feedback instead. Note, as they point out, there’s no way to do this without having a good app in the first place:

tl;dr: 1) Build a great app, 2) Don’t annoy your users, 3) Ask nicely, don’t beg

This is very personable:

circa_news_feedback

And a positive result:

 “The best part about the above experience is that for those users who are truly not enjoying their experience, they’re giving us their unfiltered feedback.”

I’ve placed buttons for both rating and feedback in the About or Info sections of my apps. The ratings have been good 4.5 stars on average, but light. I do get feedback via email from users asking for features or occasional fixes.

In either case, implementing something similar might trigger more of both – and in a way that doesn’t piss off the potentially favorable reviewer. It is a little sneaky to shunt displeased users off to feedback, but apps do live and die by ratings. If they want to, users can still find the rating button. It gives them a place to vent their frustrations and gives the developer a chance to redress the issues – a win for both.

Read more at https://medium.com/circa/the-right-way-to-ask-users-to-review-your-app-9a32fd604fca

Thanks to Barrett Golding (@hearvox) for pointing me to the article.

Designing a Versatile Logo

Design, Graphics, User Interface

Good logo design has always been hard. The number one characteristic of successful logos – ones that stand the test of time – is simplicity. The best example is GE’s logo, which was created in the 1890s and revamped somewhat in 2004:

It’s only gotten harder with the advent of digital media and mobile device screens of all resolutions. On the other hand, tools have gotten better and for those who aren’t artistically-inclined more resources, such as typefaces and icons, are readily available.

Recently, I decided to create a web and app-based service called NoteVote. Basically, if you hate sitting through long meetings, this will be a tool you’ll like. While it may seem odd, one thing I do whenever coining a new name is to test how it will lend itself to branding. Someone else might jump straight into coding but at heart I’m a UI/UX guy.
The first things that came to mind were to include elements such as a note icon and a thumbs up icon, as well as both a logotype (a logo including text) and a stand-alone logo (suitable for app icons, favicons or uses where space is constrained). I also looked through my typefaces and chose to use Banda (the regular weight is free), which is a friendly, clean and well-spaced design (the kind you’d invite your mother to see).  My first iteration was this:
notevote_initial
I sent this around to a few friends – people with varied backgrounds (sculptor, web/app developer, English/writing professor, grass-fed beef rancher and one of my favorite people, Chrysti the Wordsmith – to see what they thought.

The artist was the first to get back to me and his comment was, “I wish there was an alternative yay or nay for the thumb; Facebook has made us all sick of looking at that icon, but I see why you like it—its a clean logo.” So…a few more iterations:

notevote_iterations

There are things I like about these. Yet, aside from the over-used check mark, what they lacked was the humanistic element. Other logos I’ve designed that have worked well have at least suggested that, e.g:
infused
So it was back to the thumbs up. “Talk to the hand!” 🙂 And from there, tweaking various aspects of the design. One thing I wanted to be sure of is that the line weight of the artwork was exactly the same as the fontweight. In Illustrator, this is as easy as converting a character to outlines, selecting a leg, and copy/pasting it, then looking at the reported width:
notevote_n
I also wanted the note icon to look square – like a Post-It. (Never mind that bending the corner is usually associated more with a sheet icon. Sometimes rules are meant to be bent). I started with a square, created the bent corner, then made three significant alterations.
  1. Both logotype and standalone variations
  2. Joining the hand and note icons
  3. Removing the upper left-hand corner

Variations are necessary because, as mentioned, a logo needs to be able to accommodate a variety of branding uses. Joining elements marries the design elements into a cohesive whole. This serves to unite the cognitive concepts expressed in the logo as well as differentiate it from similar designs. Removing the corner was done to counterbalance the break above the n in the logotype variation and to suggest both speed and the notion that once the note-taking part is done it takes a backseat to voting on the best ideas.

Surprisingly, the second proved the most challenging. I had something in mind similar to approaches like this (although I dug this up just now, well after the fact):

postscript_peewee

My first attempts were like this:

notevote_join_1
And that would be fine. I found, however, after printing it out and looking at it on my phone that it didn’t feel quite right. So I did this and digitized the inner curve:
notevote_curve_digitized
That’s some high-tech shinola, there, resulting in:
notevote_join_2
Other considerations are noted here:
notevote_logo_annotated
Going with a single color and ensuring that the artwork is using it properly – i.e. no masks, mixed RGB/CMYK or other colors – means it is effortless to change it to accommodate light or dark backgrounds and to avoid color clashes. The SVG version is tiny and can be used just like this in a web page, meaning it will never be jaggy, regardless of page sizing or screen resolution. Who wants to create endless raster variations?
<img alt=”logo” src=”images/site/notevote_logo_blue.svg” id=”headerLogo” />
I hope this helps you with design considerations. Feel free to direct questions my way via  or http://notevote.uservoice.com/ which is also where you can sign up for the NoteVote beta.

Drawing an Anatomically Correct Directional Arrow

Design, Graphics, User Interface

It’s far down the list of issues I’ve ever dealt with, yet the ubiquitous directional arrow has always bothered me a bit because the blades are too thick. This is because it is naively rendered using the same stroke width. I took a look at it and realized that the proper blade thickness should be based on the blades’ angle. This can be determined mathematically by taking the square root of the cosine, e.g.

clip_image001.gif

So a line that was 3 pixels wide becomes 2.53 pixels wide (3 x .840896). Here’s a schematic showing the construction steps (click or tap to embiggen):

arrow_drawing_schematic_4

The effect is less pronounced at shallow angles, more so at steeper angles (with a corresponding need for correction):

clip_image003.png

Update:

The morning after originally publishing this post, I saw a proper example of one of these arrows…on a North American Van Lines moving truck. Who woulda thunk? But a little analysis of the logo with an arrow overlaid that has blades at a 37.5° angle shows their designer was, uhm, pardon the pun, thinking along the same lines:

NorthAmericanVanLines

NorthAmericanVanLines2

It’s very close to fitting the formula.

Make it Musical

Design, Graphics, User Interface

When I first started taking guitar lessons, my instructor told me that while it would be hard at first to sound good (it’s still hard, bro) to “always keep it musical.” What he meant and what I try to explain to my son as he progresses as a guitarist is to make it sound like a song. Don’t get wrapped up in the mechanics or lose the beat.

Yesterday, I was with our other boy and we stopped into Staples to get some school supplies. This was my first opportunity to play around with both an iPad Air and the new Mini, which is the one I’d get if when I start doing cross-platform development for iOS. They are both really nice devices and very light. I had an iPad (3) and the Air blows it away. Yesterday evening toting my Surface to a book seminar I’m part of it felt heavy in comparison.

Yet this was also my first time really experiencing iOS 7. And one thing that struck me is that the animations seemed rather clunky. How could this be? The display tag below it proudly extolled the presence of the mighty A7 processor. It’s not a hardware issue. I was surprised how rough things like the transition between portrait and landscape are. Not to make comparisons too much, but Microsoft did a pretty good job on that in Windows 8.x.

It wasn’t until we were driving home that it struck me what it was. Whoever designed those animations failed to make them musical. I had happened to turn the radio on, which was set to NPR. While I’m not much of a Classical music fan, I appreciate certain composers and pieces. The overture from Verdi’s La Forza del Destino was playing. As it opened, I suddenly pictured in my mind animating tiles and color transitions in time with the music and reflecting the mood of the piece. Feel free to listen to it while you finish reading:

If you’ve ever seen Fantasia or Bruno Bozetto’s parody Allegro Non Troppo then you will have some idea what I am talking about. The next time you make an animation or transition, try setting it to music while you’re working on it. One thing these master composers had down is timing and mood.

In a subsequent post, I’ll show a recent example where I was setting animation and transitions to sound effects for an animated, vector-based splash screen. Ordinarily I wouldn’t add one to an app, preferring to get right down to business, but this is for a game and it’s  also meant to add a little branding and some personality. One thing I found is that visual perception effects the way the user connects sound and sight. Sometimes you have to futz with timing so that a sound either starts earlier or later.

Labeling Graphs

Design, Graphics, Graphs

Recently, WikiLeaks released a draft text of the intellectual property chapter of the Trans-Pacific Partnership agreement. In what is otherwise an excellent (and somewhat disturbing) analysis of the data done by Gabriel Michael, a Ph.D. candidate at George Washington University, there is one problem: I couldn’t read the labeling on the graphs very easily. In this case, since the data is heavily tied to connections between countries, it’s essential to understanding the relationships presented in the graphs.

To a degree, this was exacerbated by the layout of the Washington Post’s article template (http://www.washingtonpost.com/blogs/monkey-cage/wp/2013/11/18/the-united-states-is-isolated-in-the-trans-pacific-partnership-negotiations/) which is where I first viewed these. But even viewed on the author’s original site – somewhat larger – they can still be difficult to read (http://topromotetheprogress.wordpress.com/2013/11/17/visualizing-negotiating-positions-in-the-tpp-ip-chapter/).

orginal

Allow me to make it clear that I’m not picking on anybody here or denigrating some very fine scholarship. I’m just adding a couple of modest improvements in the hope that graphics such as these will be able to reach an even wider audience. They carry a message that really needs to be received by as many people as possible.

First, the obvious. I increased the font size. However, it’s (usually) more legible to also change to a sans-serif typeface…and, while we’re at it, let’s bump up the weight. So now we have:

improved

It’s worth noting that I was able to save the image at a smaller size too. It’s 440 pixels wide (including a bit of white space) and could now conceivably be viewed on a phone.

There is another improvement that may be made: Getting rid of the thin black lines around the circles. They don’t fit with the rest of the imagery in the graphs. Furthermore, a hollow shape requires a bit more visual decoding by the viewer’s eyes. Of course, removing those lines also means reversing the text color and picking some solid color for the circles. I chose a grayish-blue, not too saturated, to provide a bit of contrast to the yellow-orange-red lines:

better

Again, this post is not meant to be anything more than constructive. We all have our strengths and weaknesses.

NoNoUI?

Cloud, Design, User Interface

“We are overloaded with childish mythologies like ‘the cloud’; a soft, fuzzy metaphor for enormous infrastructural projects of undersea cables and power-hungry data farms.” – Timo Arnall  http://www.elasticspace.com/2013/03/no-to-no-ui

Even in rebutting a metaphor, one can have difficulty avoiding metaphors, e.g. “data farms.”

I’ve largely ignored term “no ui” because it’s a crock and a waste of time. As for terms like “the cloud” anyone that develops against remote servers/storage knows better. Yet it’s not the worst shorthand in the world to describe some set of services and storage that can be so varied but is definitely not “here” or local to the user or their devices. From a developer standpoint, all I care about is making sure my users don’t get screwed. That involves handling a lot of edge case scenarios, both in terms of some users and occasional tasks or conditions confronted by any user. While aesthetics, input and appropriate functionality are all important, my main goal is to create software “that just works.”

To give an example of that, someone once figured out that you could use Adobe Photoshop’s lighting filters to created shaded relief maps and Adobe’s programmers were attentive enough to make something unanticipated like that work, but almost certainly they never thought about creating the filters for use by cartographers.

photoshop_shaded_relief

Incidentally (in http://www.esri.com/events/devsummit/agenda/keynote), Jared Spool has come around more to a notion of transparency rather than invisibility. So while Arnall may be right in citing Spool’s 2009 article as seminal in the No UI movement, it would be good for him to update his information. Spool, IMO, has some good things to say and even if it’s indirect inspiring developers and designers to do better work.