Tagged:

A few Hoptoad UI adjustments

Since we launched the Hoptoad redesign we’ve been discussing ways to improve usability which has lead to a few changes as well as some new features. Below is an overview of some of these changes:

Error Index

1. Rails environment indicator: in order to save space we trimmed the environment to the first character which will expand when you hover over it. Additionally we added the environment indicator to the project error view.

2. Nicely truncated error messages: error messages are now longer than before and truncated based on the width of your browser. Go ahead and maximize the window to your 30” monitor and enjoy.

Error show page

1. Sensible left column: We’ve limited the information on the left to be more global in nature.
2. Error message: We moved the error message to the main column and grouped it with similar information. This allows it to display in a full and unencumbered form.
3. Navigating errors: You can now navigate through similar errors using these handy buttons.
4. Link to GitHub: This button will take you directly to the file in question if it’s available in GitHub.

We’re continuing with improvements throughout the app in order to make daily use of Hoptoad as pleasant as possible. As always, thanks for riding the toad.

July 8, 2009

Tagged:

Comments (View)

sign up, sign in, sign out

What is your Ubiquitous Language for authentication?

Common language includes “logging in”, “registering”, “joining up”, “creating an account”, “signing up”, & “signing out”.

Do you interchange these words in your UI? How about in your application code? Tests? Does your whole team use the same language across all layers of the software?

When writing a library like Clearance, I feel the authors should take a stand on language to alleviate the mental burden on designers, developers, & business analysts involved in the project.

The decision is basically arbitrary. No one set of terms is truly better than the other. What’s important is to take the opportunity to standardize all the places this shows up in code.

So we picked “sign up”, “sign in”, & “sign out”, a lingual trinity of authentication.

We liked the symmetry. We liked that there was less of a chance of writing “log in” (sounds like a verb) or “log_in” in certain places and “login” (sounds like a noun) other places.

About a half a year later and we still feel good about the effect:

Tests

context "when signed out" do
  setup { sign_out }

  context "on get to new" do
    setup { get :new }
    should_deny_access
  end
end

context "when signed in" do
  setup { sign_in }

  context "on get to new" do
    setup { get :new }
    ...
  end
end

context "when signed in as an admin" do
  setup { sign_in_as Factory(:admin_user) }

  context "on delete to destroy" do
    setup { delete :destroy }
    ...
  end
end

Application code

class UsersController < Clearance::UsersController
  def create
    ...
    sign_in(@user)
  end
end

class ParticipationsController < ApplicationController
  protected
  def ensure_signed_in
    unless signed_in?
      store_location
      flash[:failure] = "Please sign in to participate in this deal."
      redirect_to sign_in_path
    end
  end
end

module NavigationHelper
  def authentication_links
    if signed_in?
      signed_in_links
    else
      signed_out_links
    end
  end

  def signed_out_links
    [link_to("Sign up", sign_up_path),
     link_to("Sign in", sign_in_path)]
  end

  def signed_in_links
    [link_to("My Account", edit_user_path(current_user)),
     link_to("Sign out",   sign_out_path)]
  end
end