Redesigning the Map of the Web

Leverage what information representation can be

It may seem like old news to some, but I very recently got around to reading Frank Chimero’s treatise about the essence of a pixel medium in What Screens Wantand found myself musing about a potential Web that doesn’t conform to our assumptions of what sites and pages are supposed to be made of. I also found myself explaining the whole article to a couple of developer friends that didn’t want to read it themselves.

One key point

The article leverages some historical references with materials in product design, but most convincingly compares the state of the Web as we know it to our centuries-old use of maps.

In the way that a map is a representation of territory, which is likely skewed for one purpose or another, we can use a new one that suits our needs and changing the map doesn’t mean changing the territory. In that same breath, using a different map doesn’t imply the territory was “bad.” The lesson for technology and the Internet here is that we have long since built off of one convenient representation of data, information, and the nature of its exchange. Our concept of a web page is just one map upon the territory of computers and the protocols to connect them.

Chimero quotes Ted Nelson to reiterate our position in the digital world:

“The world is not yet finished, but everyone is behaving as if everything was known. This is not true. In fact, the computer world as we know it is based upon one tradition that has been waddling along for the last fifty years, growing in size and ungainliness, and is essentially defining the way we do everything. My view is that today’s computer world is based on techie misunderstandings of human thought and human life. And the imposition of inappropriate structures throughout the computer is the imposition of inappropriate structures on the things we want to do in the human world.”
— Ted Nelson, creator of hypertext

For more context, I recommend that everyone visits — or revisits — the site. The grand takeaway is that we can and should build something greater/better than than web pages. Not only can information be represented differently, but I think we are just barely touching on how flexibly it can respond to, and be interact with users. Laying back in a metaphorical Summer meadow with arms behind your head and eyes tracing the clouds, I could come up with wilder takes on a new Web, but it may be practical to focus on some softer, more accessible points.

Soft Revisions

Web content should branch off into more applications. While this already happens in mobile environments (perhaps too much so), the trend is inverted on desktop. As a service reaches a critical mass of content+popularity, or if the interaction is constrained by browsers, then it should live in more software than just a handful of browsers. Facebook is a great example of this thinking. Most people are using the app on mobile, but there is only a web interface on desktop. In the early days of twitter, I used the website and SMS to send tweets, but as soon as a desktop application appeared, that became my primary interface with the service. In that respect, it’s almost crazy that Facebook is just a website.

I’m not advocating for a fragmentation of the Internet into hundreds of desktop applications — that would be disastrous on many levels. When user adoption is no longer a huge issue, it could make sense for some sites tomature into internet-based software. Specifically to Facebook, as many people use it so frequently and often for long periods of time, it deserves an option to break out of the browser.

I think there’s a big opportunity for Finance; not necessarily a single bank, but perhaps a broader service (yes, MS Money tried that but I don’t see newanswers). I’m hesitant to list other recommendations, and can already see the counter-arguments, but I prefer to see that as a point of discussion.

Medium Revisions

No pun intended, but…

It’s already apparent that some sites are innovating how we share and interact — being one of my favorites, for the side-line commenting that other sites are starting to adopt.

Hyper-specific sharing

I’m putting this in the bucket of “medium” revisions to the Web because it would require a bit more work than what already exists. With this idea I’m taking a note from two existing functions:

  • With Medium’s comment system, you can highlight a string of text, write a comment, and any user that reads the comment also see the same text highlighted again. This is the digital equivalent of pointing your finger to a point on the page that you’re referring to in a detailed discussion, or a well-loved book borrowed from a friend that shows underlines of passages that directly affected your friend.
  • Anchor links are a classic HTML tag that is seeing interesting use in contemporary websites. Long scrolling pages will use anchor link navigation to push users down to a segment in their single page site. Articles will reference specific explanations in a foot note. A List Aparttakes a subtle, but very useful approach by segmenting their articles so that an HTML literate user can share a specific section of the page to someone else. If you visit an article (example), and hover your mouse on a section title, it will display gray #anchor text that you can’t click but — with an experimental mindset — can append to the article URL as a bookmark you’re referencing when shared (example).

Combining the two features above would be a very interesting, and more personal method of sharing. Posting an article link on your social media account might interest a portion of your friends/followers, but it’s open-ended; a suggestion that “hey, you might be interested in this topic.” If you can highlight a paragraph or sentence, and have the page generate a dynamic anchor link to share with someone, that’s direct and suggests more intention. Akin to reading a book across from a friend, and handing it across the table so they can read just that one pithy paragraph, dynamic anchor linking and highlighting the referenced text is an excellent way to rekindle the human connections that seem to be fading away in our “social” media culture lately.

Hard Revisions

This the domain of true revolutionaries

Having been invited — so to speak — to think about an internet that doesn’t run on HTML, PHP, CSS, or any of these languages it has been raised on, I am starting to dream in abstractions. There must be alternative representations of our information-rich landscape, and most of us can only iterate or improve upon the existing system. These scrolling pages with various media buckets — usually requiring some kind of chrome/framework — that fit inside of a screen (if: responsive web design) are our current maps, representations of information.

What about the integration of more user info? Contextual browsing, listing, etc.? This implies some things that exist (foursquare), some things that don’t (the local paper where you’re online), and might be horrible ideas (who wants to read the local paper), but a very thin slice of that implication might be the turning point of something new and amazing.

Break the rules. If you can!

Project Planning, Reblog, Work

“Don’t say you don’t have enough time. You have exactly the same number of hours per day that were given to Helen Keller, Pasteur, Michelangelo, Mother Teresa, Leonardo da Vinci, Thomas Jefferson, and Albert Einstein.”
Life’s Little Instruction Book, compiled by H. Jackson Brown, Jr.

Making Time for Side Projects

By Rachel Andrews on An A List Apart
Rachel Andrews shares some tactics for finding time to dedicate to additional projects, and the motivation to actually work on them.

Make time


Auto-punctuation and syntactic processing

Once in a while, when I might want to construct a clever piece of SMS text-art, I can be annoyed by the automatic placement of the period (full stop) after entering space two times. We must design for the most common use cases however, and on the whole, I do like this auto-fill logic. The little things are often what delight users the most.

Being too liberal with a well-intended shortcut or assumption can be a UX calamity, but I believe that with some additional linguistic information (and a fair amount of user testing), the double-tap auto-punctuation could be extended to questions with a fair amount of success.

Present functionality

Let’s keep in mind that at present, this feature applies a period any time the space button is hit twice in a row. It could interrupt a sentence, or easily mislabel a question or exclamation. It’s currently up to the user to add alternative punctuation before continuing, or to erase the auto-punctuation and correct it.

Proposed functionality

Imagine double-tapping the space bar and iOS would predictively produce proper punctuation — I couldn’t resist the alliteration. This would be informed with linguist programing about content (question words) and context (companion words that differentiate statement from question).

Do you know how to do this? versus You know how to do this.
Reason: Presence of auxiliary “do” in Do*know. Note that the statesman also has the word “do,” but only as an infinitive (to*).

English can be tricky with its question semantics, and this solution would require localized code for different input languages, unlike the global period insertion.

Limitations, Advantages

For English usage, the limitations are easily apparent. It may require too much precious processing to scan an entire string of text for this kind of semantic context. For some languages it might be pointless if an opening punctuation is used – such as the Spanish ¿?. It would be interesting to survey Spanish users to see how prevalent this convention is during SMS or other mobile communication. My hunch is that like many English vowels, these opening question marks are usually dropped for brevity.

Some languages lend themselves to very “easy” semantic processing; so much so that one might think “why aren’t we doing this automatically?” To reference Spanish again (the only other language I feel qualified to write about), circumstance words are supposed to be spelled differently in the context of a question.

What/how is (she/he/it) like?
¿Cómo es?
What/how (she/he/it) is like.
Como es.
Interrogative circumstance words (what, where, etc.) have an accent, but do not in statements.

This is just a potential shortcut, and there are many question sentences without one of the “five Ws,” but it’s an example of logic that can circumvent contextual rules. Some languages even have question words (Japanese and Mandarin come to mind), but they also tend to not use question marks as far as I know.

This is just a few minutes of brainstorming, but if done properly, it could pretty useful, couldn’t it.

What do you think.
See what I did there.


Do As Little As Possible

It’s not the old Web, it’s the future Web. It’s changed. It got a summer job, went off to college, got sophisticated.

Looking at this new web and seeing beyond the specificity of the mobile web, or at least seeing it as an extension of the web, allows us to shore up some of the more fragile foundations we’ve laid and find ways to build the web that make a bit more sense.
A List Apart, “Do As Little As Possible”


Aside: development roadmap

After a few months of posting frequently, I now see how a lot of this should be reorganized. I’m going to avoid changing the theme as much as I can, but might switch up a few things:

Descriptive titles
“Link drop” won’t suffice if there are so many of them
Categories overhaul
These were originally created for aspects of a web portfolio and don’t speak to the site as it is now. I’ll be ripping out old categories and surveying the existing content for some appropriate categorization.
Archive is where?
Yeah. It bothers me too. There’s no decent archive, and that’s the fault of this theme, but shouldn’t be too hard to implement.
Maybe this is a case of header-blindness, but I immediately skip to content below the current header image on this home page. That means I forget about search and don’t “see” it. Need to reconsider placement (and style).
Design Elements
I’ve been running off a few things included with the theme (such as this great “dictionary definition” list style), and thumbnails from Kuvva, but the site deserves more attention. I can fashion some less cumbersome thumbnail galleries, and more varied type treatments for contrast when skimming. I see loads of inspiration every day, and post about half of them as links; it’s time I draw on greater designs.
Better messaging
This is more of a secondary detail, but I recently created a page about the site, and will make a bio page, and probably a contact page as well. I should wrap in some more context to this site, but also be clear that it’s basically a glorified pasteboard for my personal use. If you enjoy some of these references, then great. Just know that I’m not committing anything to readers. No schedule. No writing about X, Y, or Z.
Musings, Project Planning

Making better use of better tools

I got a lot of milage out of the phrase “this gig wouldn’t be any fun if it were easy” this year.

When I was in my early twenties and just learning carpentry, all of my tools were terrible. My hammer bent nails, none of my saws ever cut in a straight line, and my tape measure always managed to be off by just a little bit once everything was said and done.

Let’s be honest: responsive web design isn’t easy when you’re just getting started with it. It calls for some major changes in both thinking and process. You start out clumsy at first, like with any new tool; maybe you even find yourself cursing it out from time to time. Thing is, once you’ve struggled through it and you stand back to admire what you’ve built: yeah, maybe you can see a couple of seams and maybe you could have done a few things better, but you’ll know those mistakes before they happen next time. When we move on to the next job our tools seem a little lighter, sharper, and more accurate than they did on the last one, because we got better with them.

This year we all started getting the hang of an incredible new tool. Next year we’ll get even better with it.

We’ll probably still do a fair amount of cursing, though.
Mat Marquis, designer/developer, Filament Group, and technical editor, A List Apart