I often find inspiration in the sometimes minimalist, sometimes colorfully-bubbly and always cutting edge style found in UI designs from our Asian counterparts. In fact, some of my favorite work comes from the Eico Design firm out of Beijing which consistently impresses me with their inviting, intuitive and downright slick user interfaces.
Click here for even more beautiful examples from the Pacific rim via Woorkup.com. Domo origato, dudes.
I spend a lot of time thinking about CTAs (or call to actions) over the course of an average work week. My team puts together advertising units, widgets and mini-site mock ups almost daily for big name brands and it’s important to create CTAs that are clear, eye catching and effective in converting to clicks. Some of the things we pay attention to mirror the tips mentioned here but there are a few more things to keep in mind that can help ensure you’re designing an effective CTA:
1) Size matters – make sure the CTA is big but not obnoxious. I’ve seen designs that go so big that the CTA ends up resembling an ad unit rendering it invisible to less savvy users. Find a good balance between your buttons and the surrounding elements but always strive to make it stand out, without scaring the user way.
2) Shape it up – Making your CTA look like a nice, inviting, rounded corner button makes sense about 90% of the time, but if you’re designing within an existing site or ad unit be mindful of the existing style. Sometimes, a link may be your best bet rather than using something resembling a button or badge. Whatever you end up doing, remember to use high contrasting colors to draw the eye and mouse.
3) Stick it where it counts – Positioning the CTA is probably the most important thing to consider. Remember that a user’s eye will generally track from left to right, top to bottom so the top-right portion of whatever you’re designing will be your hot spot. It often seems natural to place the CTA at the right/bottom-right of your design, but we’ve found that even with something like a 728×90 ad unit the CTA on the far left will perform more effectively. This is an excellent example of good positioning. Learn it.
This is a site I helped Dr. Michelle Post with a little while back. It took some time to get live due to issues over at GoDaddy.com (DNS names not resolving properly across registrar to hosting accounts) but it’s finally up. Back in the summer, this was my pride and joy — utilizing CSS3 rounded corners, transparent backgrounds, drop shadows with bright colors and a new logo design thrown in.
Dr. Post is a wonderful professor I met at the Art Institute of Colorado and offers amazing Custom Training Programs, Public Speaking talents and Education Coaching. I just hope the site does her talents justice.
And here’s more than a dozen reasons why: 14 Outstanding jQuery Navigation Tutorials. (via Queness.com)
I’ve become a huge fan of jQuery over the past 6 months or so. Prior to that, I was using a combination of Scriptaculous and Prototype (with a tiny bit of mootools for good measure) to do what I consider some pretty slick stuff. Since making the switch and playing with jQuery in my spare time, I’ve found the best thing about jQuery may be the way it’s structured — providing various JS design patterns to be rendered shorter and simpler when you compare it to the Prototype framework.
Some of my best designs (not speaking subjectively, but based on quantitative interaction metrics) come from spending a fair amount of my time literally drawing out prototypes and use-cases. Yes, with a pencil and paper. It’s easy to think through the functionality of a site in your head and assume you have it all worked out, but it’s never wasted effort to take things one step further. Or two, or three.
By putting pencil to paper, an Interaction Designer will spend more time putting himself in the user mind-set and create a bigger window into understanding the properties of their user’s capabilities. In a sense, it allows you to become an architect that brainstorms then refines countless drafts of his building to ensure all the beams and framing will hold up to the physical traffic, customizations, and decorations that future tenants will bring.
“The application of this understanding to the design, development and deployment of systems and services” — a.k.a. Human Factor — is all the rage for resume buffers. But as a manager looking to hire a real interaction specialist it’s almost too easy to spot the less talented that claim to be UI/UX experts showing such flawed designs in their portfolio. All of which could have been made far more intuitive and useful had they only spent the time with even an online prototyping/mock-up tool.
In some cases, sketching out website pages and functionality as I envision it has lent itself to providing inspiration for design elements. Take a look at these and you’ll see what I mean. And grab yourself some graph paper, a ruler and a nice no. 2 pencil already.
About a month ago, Ivan took me on as a ‘consultant’ to help get his senior project off the ground. He’s playing the role of a creative director in charge of designing and implementing a new way finding system for his school, the University of the Pacific in Stockton, CA. The portion of the project that I helped out with was giving the school’s website a new look and feel while buffing out the Maps & Directions section so that it taps into the new way finding system and offers users a more useful and engaging experience. Here’s what we came up with:
Index page: Most of the design changes here were to expose important links, set up a consistent top-down navigation style and create clearer CTAs. These, and the other changes you see, give the structure of this site a more intuitive layout that will improve engagement.
Maps – Directions: By default, the Directions page will use GeoIP information to pre-fill the zip code/city information and display the shortest route by car without having the user to initiate the query. I envision this page tapping into the Google maps API which would give users the ability to show turn-by-turn directions and toggle between directions by car, train and bus.
Maps – Interactive: The ‘jump to’ links at the top would highlight that section and the links themselves would tie back into the on-campus visual queues. Below that on the left, we’d allow users to enable the high level nodes and highlight each building therein. We would also provide check boxes to highlight other things like campus landmarks, wifi hot spots, emergency phones, etc.
Maps – Virtual Tours: Tapping into the student body to assist with ‘virtual tours’ is a great way to further engage potential and existing students. It’s also a great way to promote the way finding system through peer communication – I envision the students talking about the different areas of campus while pointing out the kiosks, signage, etc.
Maps – Mobile site: Much like the iPhone’s Map app, the maps section of the Pacific mobile site will enable users to search for specific buildings, landmarks, cross streets, etc. then click the directions button to map a route to said location. When clicking the directions button, the user’s current position (via cell phone triangulation or GPS for GPS enabled mobile devices) will be used by default, but you’ll be able to overwrite the position using an input field.
I had so much fun on this project. I’m honored that Ivan would even consider bringing me in to help and hope my input will be helpful when he makes this whole mess a reality.
It turns out there are lots of techniques to create rounded corners with CSS. The only methods I’ve used thus far – outside of corner images – included the use of these proprietary CSS properties:
Firefox using the -moz-border-radius property to control the corner radius of a page’s border and Safari doing the same with -webkit-border-radius or -khtml-border-radius properties.
I noticed rounded corners being used more frequently about 4 years ago, just as the ‘Web 2.0′ style became so rampant. At the time, rounded corners seemed like it might be a fad that would go the way of midi audio loops. As it turns out, they’re here to stay and offer an easy alternative to giving page elements an elegant look while defining space more effectively on bucket heavy pages .
I’m looking forward to CSS3 and HTML5 becoming standard and I’m very excited to see all the awesomeness designers throw out in the months to follow.
Every year around this time I stumble across dozens of Holiday themed sites that bring a little merriment to my days at the office. I never bookmark them, of course, but I recently came across this wonderful list of sites that are dishing out yuletime design with some clever CSS and couldn’t help but share. And here’s a list of 25 Holiday inspired wallpapers that also make me happy.
Enjoy!
This week, some colleagues passed around this interesting read on debunking the myth of the page fold. The argument being made is users don’t really mind scrolling to access content below the fold and there’s data from user testing to back it up.
I’ve certainly observed this anecdotally in recent years and usability testing aside, I think a large part of this growing acceptance is due to a combination of 1) advances in hardware (scroll wheel on the mouse, touch pad dragging) which make scrolling down the page an afterthought and 2) media brands setting precedence with longer pages which has reinforced the notion of necessary scrolling to access non-featured content . Indeed, “A quick snoop around the web will show you successful brands that are not worrying about the fold either.”
Awesome Jon sent this gem as a response and noted “I think the industry education is on the ads side of things…”. Agreed.