2011-061 Falcon blog links/embeds

4 Responses

1. Tantek Çelik

   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).

   about 2 years ago

2. Pro Ted Goas

   Saw your name on dribbble and had to check this out. Nice idea!

   1likes

   about 2 years ago

3. Tantek Çelik

   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:
   http://tantek.com/2012/296/b1/san-francisco-election-flyer-statistics

   Still tweaking pixels a bit and will post a screenshot here soon.

   7 months ago

4. Tantek Çelik

   Updated citation UI screenshot dribbbled: http://dribbble.com/shots/820580-2012-312-article-citation-UI-update

   6 months ago