Inspired by YouTube's original easy-to-click-copy-paste-share UI for the link or embed for a video, I'm incorporating a similar design for the sidebar of my blog posts. Changes I've made:
* microcopy ("shortlink" and "permalink" instead of "URL")
* stacking labels/inputs vertically rather than side-by-side (see http://flic.kr/p/iciBu - 2006 screenshot of a YouTube video page for comparison, though they went with vertical stacking as well as of 2008 March - http://flic.kr/p/4xvnfU )
* citation hypertext (new as of 2011-061) - code to copy and paste if you want to put a link to this in a post that you're writing. linking to a blog post is more common than embedding it so I went with that first. still working on figuring out a nice UI for blockquoting from a post - will analyze Tumblr UX for ideas.
I've added the "Tweet" button (also new as of 2011-061) because that seems like a very common use case. Ideally if a reader is signed in with another "Twitter-like" service (Status.net, identi.ca, or perhaps their own site/blog) then the Tweet button would be replaced (or added to) with a button that "tweets" on their service of apparent choice.
More history and past screenshots of Falcon UX development here: http://flic.kr/tantek/tags/falcon (vast majority before I was drafted to Dribbble).
almost 3 years ago
Saw your name on dribbble and had to check this out. Nice idea!
A few months ago I dropped the links/embeds interface completely from tantek.com.
Some feedback I've gotten on this (now old) design:
* text is too small
* hard to read font (especially at that size)
And a few aspects I decided I didn't like after a year of reflecting on this design:
* "shortlink" is no longer that useful since Twitter wraps all links in 20 character "t.co" links no matter the length. thus it's worth dropping from the design.
* "permalink" sounds too jargony once there is no need to distinguish it from "shortlink". The 2006 YouTube screenshot shows them using the label "URL".
* "citation hypertext" is too academic/jargony of a phrase.
* "citation" implies something you stick at the end of the post (where as the intent of that design element is an easy copy/paste hyperlink to use in the middle of a blog post)
* "hypertext" doesn't mean anything (or much) to most people, even bloggers (who are the intended audience of users of this feature). A friend even said it sounds like "hypercard" - not sure why she'd be interested in that.
* was considering "HTML code" as a replacement label, but right next to a block of actual code, there's no need to say "code".
Thus as of 2012-311 I've redesigned and added a simplified URL/HTML copy/paste interface *only for blog post articles* (not tweets/notes, yet). E.g. see the bottom of:
Still tweaking pixels a bit and will post a screenshot here soon.
about 1 year ago
Updated citation UI screenshot dribbbled: http://dribbble.com/shots/820580-2012-312-article-citation-UI-update
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter