Tag Archives: usability

Google Books: please make better use of screen space on my netbook

1 Reply

The screen-shot below shows the appearance of a 15 April 1972 Billboard magazine article about Pink Floyd, in Google Books, on the screen of my Lenovo S10-S2 netbook, using my default settings. 

Screengrab, showing the top of a scanned magazine page, with a picture and then only a few lines of text showing

Although I’ve used Google Books’ “full screen” setting, this only uses the full width of the screen, not its height. Of the viewport’s 509 pixels height, virtually a fifth, 98 pixels, are taken up with navigation tools which are, while I’m reading the article, redundant:

The top of the previous screengrab, showing navigation links

It would be good if Google would let me hide that header until I need it again, and thereby reduce the amount of vertical scrolling needed as I read the multi-column content.

Improving the already excellent ‘Twitter Blackbird Pie’ WordPress plugin

4 Replies

I’ve just started using the “” plugin to embed tweets into WordPress posts (I use the self-hosted wordpress.org package). You can see an example below:

[blackbirdpie id=”66835851316957185″]

It’s fantastic — no more taking screen captures, cropping and uploading; or faffing about manually constructing links. All I have to do is include the magic code [blackbirdpie id="66835851316957185"] with the ID of the tweet (in the above example, taken from http://twitter.com/pigsonthewing/status/66835851316957185) as the id parameter value.

However, there are a few ways in which the plugin could be improved.

hCard microformat

Firstly, add an to emit details of the cited tweeter as metadata, by changing, for example (inline styles omitted for clarity):

<div><a href="http://twitter.com/intent/user?screen_name=pigsonthewing">@pigsonthewing</a><div>Andy Mabbett</div></div>

to:

<div class="vcard"><a class="nickname url" href="http://twitter.com/intent/user?screen_name=pigsonthewing">@pigsonthewing</a><div class="fn">Andy Mabbett</div></div>

with the addition of three class attributes: “vcard”; “nickname URL” and “fn”.

Citation

Next, instead of wrapping the contents of the tweet in a span, wrap it in a semantically-appropriate blockquote element, by changing:

<span>Blogging about a Blackbird.</span>

to:

<blockquote cite="http://twitter.com/pigsonthewing/status/66835851316957185">Blogging about a Blackbird.</blockquote>

and styling to maintain the current visual presentation.

Separating links

When viewed with CSS disabled, the tweet’s actions (“Reply”, “Retweet”, “Favorite”) run into each other.

Screenshot showing links with no spacing, when CSS is disabled

To improve accessibility and usability, either add white space between them, or, better, mark them up as a list, styled to display in-line, unbulletted, again looking like they do at present.

White space

There is more white space above then below the embedded tweet, above. A little more padding below it would improve readability.

COinS

Finally, consider adding COinS mark-up, so that details of the cited tweet are emitted as metadata.

Invitation

I hope the authors of the plug-in, Themergency.com, will appreciate and act on these suggestions. I’ll be inviting them to read and comment on this post. And I’ll be happy to help with developing any of the ideas suggested above.

Google Reader's great, but it could be even better

2 Replies

Here’s another screenshot (linked to a larger version; thank you Flickr).

[link to large image of Google Reader screen-shot]

This one shows some of the RSS feeds I follow, in Google Reader. I only started using that service recently, and I’m finding very compelling (and time consuming!) both on my desktop PC, as shown here, and on my mobile device, using the stripped down and rather splendid mobile interface. However, I think the desktop interface — if I can call it that — could be improved and made more usable.

Firstly, I’d like a “mark as read” (or “ignore”, with the same effect) button, so that I can skip over posts which look uninteresting, without having to open and then close them to do so. It could go to the right of the “star” icon (highlighted yellow — and what’s that for? I can find no explanation, other than references to apparent side-effects of using it, in the help pages).

Also, if I select the title of a feed , such as “BBC News | News front” (a truncation of …News Front Page”; marked in orange), surely I can reasonably expect the view of that feed to open, instead of the specific post? That would be the same action as when I select the feed’s title in the left-hand column. The post’s title, to the right of the feed title, is a large-enough target to work in its own right.

Lastly, there are two “refresh” buttons (each highlighted in red). These, stupidly, have different functions. The one in the left-hand column refreshes all the feeds, while the one at the top refreshes the feed I’m viewing. If I use the latter, it clears read items from the current feed view, but annoyingly that doesn’t happen if I use the former — what’s that about? Either the two buttons should have the same effect, or they should be labelled differently.

I’d like to let Google know what I think, but — in typical Google fashion — they don’t seem to provide a mechanism for me to do so.

Postscript: The URL provided by Google for my “publicly shared items” in Google Reader, which anyone can visit, is the mind-bogglingly unmemorable, untypeable and generally unfriendly http://www.google.com/reader/shared/03499548569546420688. Why can’t I have http://www.google.com/reader/shared/pigsonthewing ?