« Oatmeal

Tagged "ui"

Follow this tag

Is pagination broken on my website?

Why is the most recent page 1? Shouldn’t the oldest, or first?” page be 1 — working up, towards the present? This way paginated urls could remain consistent. If something shows up on page 4, it’ll always be on page 4 forever and ever.

After having conducted a very brief and very unscientific survey of a handful of websites I can’t find any examples of pagination as I have described here.

Theory: this is Google’s fault. Folks see how Google’s search results start at page 1 and work back” from there, and mimic the design pattern. The issue here being that Google’s implementation of pagination is actually solving for a different problem than pagination on my blog.

Proposal:

  • Blogs, or any sort of chronological timeline should link the concepts of pagination and date, so that the older the date, the lower the page number
  • Search results, or any sort of weighted results should prioritize for relevancy, associating the most relevant results with the lowest page number (in other words, the pages closest to the user should be the most relevant to the search term)

Dear fellow app developers and designers, I have a gripe: Login” Noun. Log in” Verb.

Boring fjords

The Hitchhikers Guide to the Galaxys Slartibartfast won an award for designing the fjords of Norway. He enjoyed all the fiddly-bits around the edges.

Like Slartibartfast, I enjoy designing the little fiddly-bits, but not in a rococo sense. I like the boring, nitpicky details. I love to design settings screens! Not all apps have them, some have bad ones. Here are a few of my favorites.

iOS Settings App

The bar by which all other setting screens are judged!

iOS settings screen

iOS’ native settings app is all about organization. It outlines a clear taxonomy and is fairly straightforward to navigate (an impressive feat for something with such a sprawling reach).

From the home” screen of the settings app you can do one of three things:

  • Input text into the search field
  • Turn on airplane mode
  • Select a subcategory

Selecting a subcategory brings up a deeper detail view from where more can be accomplished. It seems like a relatively simple mechanic, but, I think it is rather genius. Generally speaking, the organization of all the subcategories is excellent…save for General.” What is going on there?

About, okay, that makes sense.

Software Update, I can dig that too.

Siri, Spotlight Search,Handoff & Suggested Apps` okay, I guess so…

CarPlay, Accessibility!? I’m just grumbling though, I understand why these would all be filed under General.”

Overcast

Straightforward, and opinionated.

Overcast settings screen

Overcast is hands down my most frequently used 3rd party app. I like Overcast’s setting screen so much I often refer to it while designing setting screens at work. It has a clear taxonomy and makes great use of explanatory text. I also like that the settings screen is broken into two levels:

The top most level (pictured above) includes all the marquee settings and features that the average user will care to fiddle with. Meanwhile, the second tier, labeled Nitpicky Details,” is how power users can access another level of control. This tiered approach is sort of like a speed bump separating the buttons that are safe to push from the ones that you might want to have read the manual before pushing.

Overcast’s setting screen is opinionated — it communicates in an attention wrangling yet clear manner, and it weights what users should fiddle with.

Coda

Much like Batman, but far less likely to throw something at you.

Coda settings screen

BLACK BACKGROUND! Always exciting. Always exciting.

Nothing much to say about this one, but I like how it matches the overall aesthetic of the app. It doesn’t feel like it was glossed over during the design process.

I like that Coda’s settings screen follows iOS Settings’ lead. Nothing can actually be done from the initial screen, instead it offers a listing of subcategories with detail views. I wonder, though, could the same effect be made with the use of labeled sections?

Pedometer++

Descriptive.

Pedometer++ settings screen

This is probably the simplest settings screen of the lot. The primary reason I like this screen is its use of descriptive labels. There is little to no ambiguity about what these switches do because each has an companion description that details its purpose.

Because I’ve set a precedent of griping about the screens, though: Customary vs Metric!?” What is customary about the Imperial measurement system!? NOTHING!


Didn’t read, watch, or listen to much this week.