2011-061 Falcon blog links/embeds

Shot_1299187221

4 Responses

  1. Tantek Çelik 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 3 years ago

  2. Ted Goas Ted Goas

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

    likes

    about 3 years ago

  3. Tantek Çelik 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.

    over 1 year ago

  4. Tantek Çelik Tantek Çelik

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like