Alexis Fellenius Makrigianni | Articles

The Select Menu Navigation Pattern

2012-03-01T11:05:00+00:00

Andy Clarke follows up on Brad Frost and my thoughts in The select menu navigation pattern. He sums it up way better than I did:

Select menus simply sweep navigation issues under the rug. They don’t help solve questions such as how to handle long lists or nested sub-navigation. I suspect they’re confusing to users too. In my mind there’s only one form element that should ever be used for navigation and that’s search.

And elaborates on giving up control of the design:

Then there’s the issue of design. While iOS’ select menus keep the user somewhat connected to the page behind, Android’s overlay device makes navigation a separate layer. Window Phone 7 takes navigation out of the site and into native Metro UI, completely disconnecting the page from its navigation. When you use select menus, you put navigation design in the hands of the operating system designers.

Put all this together and using select menus for small screen navigation isn’t just a bad option, it’s a lazy one. Let’s design something better.

Let’s design something better. I’ll drink to that.

Thoughts on Responsive Navigation

2012-02-28T00:08:00+00:00

I’ve been thinking a lot about navigation in responsive designs lately, so when Brad Frost wrote Responsive Navigation Patterns a few days ago I thought I’d write down some thoughts on a couple of the methods he talks about.

Ultimately, mobile navigation should be like a good friend: there when you need them, but cool enough to give you your space.

My main argument against it is that it feels awkward. I don’t think form elements should be used for navigation. We don’t use it on the desktop, why use it on mobile? But maybe it’s mostly a personal preference, I realize it solves the problem by keeping the navigation first while saving screen real estate.

One disadvantage though, is that it takes a few gestures to use. On an iPhone you first need to select it (1), scroll to the item you’re looking for (2), select it (3) and then hitting Done (4). From what I remember the interaction is the same on Android and other mobile OS.

The Toggle

I agree that this is probably the most elegant solution. At least for sites with just a few navigation item it’s probably the best solution. But if you have subnav items it quickly becomes more problematic. The problem is that I haven’t found an intuitive place for subnav items. In most cases you don’t want to show them initially when you toggle (the entire nav expanded), you could add toggles for each subnav too, but then it’s not that elegant anymore.

Once you have clicked/touched a nav item and landed on the page it isn’t obvious that you need to toggle the navigation again to find it’s subnav. And adding the subnav before the content don’t work well either since height matters and placing the sub-nav in the footer separates the topnav from subnav.

This is the method we’ve gone for in most projects and I think it works pretty well (take a look at unicef.se for example). Allowing the navigation to take more space lets you design clear, large and tap friendly navigation items. You can also add toggles to each subnav without making it too complex. It also follows content first, navigation second recommended in Mobile First.

Which method do you use?

Design for RjDj

2009-02-09T18:03:00+00:00

Next week I’m going to Barcelona to help Andie and the RjDj team with design and front-end code. For those of you that don’t know what RjDj is I copied this from Andie’s log:

RjDj creates mind twisting hearing sensations by weaving your environment into music. Voices, cars, your walking speed.. these and many other things can be used by music creators to shape your experience. If you have an iPhone or iPod Touch, try it!

RjDj is really interesting and I think it will be a really fun project. They have a lot of playful and colorful illustrations I’m looking forward to integrate them in a usable design.

Many thanks to Andie for our first international project!

Five years of basecamping

2009-02-05T10:16:00+00:00

This post was originally posted on our company blog.

On this day five years ago, 37signals released Basecamp, their first product. We had been following their blog for some time, but this was something else. We tried it out at once. The feeling, design and usability was like nothing else on the web at the time. It just felt right and it really helped us manage our projects. We were just about to release UNICEF Swedens site and started communicating through Basecamp right away. We still do.

Following 37signals and the development of Basecamp during those early days changed the way I thought about design and interaction. I’ve had two experiences like this in our little agency’s history. The first was when Joels classmate forced him to use web-standards. Once we started writing standardized markup we never looked back (we were one of the first agencies in Sweden to build sites according to standards). Besides all the obvious advantages like more appreciation from google, faster pageloads, easier development process, cross-browser support and all the other things we take for granted today the most important thing was that it makes you define what every part of a website is. This changed the way I thought about creating websites and lead to thinking about what, where and how the content and disposition of a site in a way I didn’t before. I wasn’t even really into designing for the web, print design was what I wanted to do. Standards changed that.

The other time was, and probably still is, reading about how 37signals think and practice design, communication and running a small business. Using Basecamp and their other products and getting real. It has inspired our work and we have since been dreaming about developing our own web-based application. And we’re actually almost there, we have a working application that a bunch of friends are using and testing. We’ll see how it goes.

So congratulations and thank you for the inspiration, we’ll continue using Basecamp, Backpack, Campfire, Highrise, and probably what you’ll release next, for the five years to come.

24h Business Camp roundup

2009-01-29T02:04:00+00:00

Andie wrote a nice roundup on our project at 24h Business Camp. You can check out the finished site. And then vote for it! Thanks for the great teamwork Andie.

I actually made a logo, around midnight during the event. I don’t do logos that often, but I think it turned out quite good.

I like Hoefler & Frere-Jones Archer typeface.

Going to 24h Business Camp

2008-12-02T17:00:00+00:00

Ted got an idea one day, inspired by Eric Wahlforss 24h dot com and Mattias Järnhill, he wanted to bring together 10 people to develop 10 business ideas on-line in 24 hours. 24h Business Camp was born. One and a half month later that number has grown to 70 people divided in mostly small teams with one idea each.

I’m going. It’ll be interesting to se what we’ll come up with.