September 10, 2015 - Comments Off on Designer Insights for Developers: Get Inspiration Outside Your Client’s Vertical

Designer Insights for Developers: Get Inspiration Outside Your Client’s Vertical

A series of tips to help developers improve their interfaces.

This tip will revolve around gathering ideas or as I like to call it “inspiration”. This helps jumpstart the design process in my opinion. There is no sense in reinventing the wheel, but it does make sense to improve the preverbal wheel or make a new adaptation of it.

Inspiration can come from all areas of the web no matter what vertical your client is in. If you do a little work upfront, you’ll give yourself considerably more options to pull from. I highly recommend doing a workflow diagram and getting it nailed down before you go on your inspiration journey. This will make your life much simpler working for a solid foundation.

From this workflow, I like to break down the functionality into chunks and simplify those chunks down to their basic form. Okay, this may sound a little confusing. Let me give you an example to better explain what I mean.

The Chunk:
There’s a piece of functionality where an admin needs the ability to set an unique set permissions to a group of users who don’t have the same type of accounts/user roles. The idea is that user gets temporary access to these permissions without affecting the regular permissions.

The Break Down:
I need to a collect two groups of stuff. Group 1 is users. Group 2 is the permissions. Then I need to tie them together.

With this simplification of “the chunk”, it opens up loads of possibilities of sites/applications/whatever else you can view to get inspiration. Now you don’t need to be tied to the idea of getting admin permissions to different systems that you most likely won’t get access to, to see how they handle it.

So what are some different types of sites that handle tying two groups of stuff together? One idea you could check out is, photo-sharing sites like Flickr. You can bulk upload your photos (group 1). Then you can append additional information to the photos like name, description, tags, sets and groups (group 2). Another idea would be any e-commerce site. In this instance, anything you place in the shopping cart represents group 1 and the information you use to pay for your items represents group 2. These are just two ideas. I’m sure there are few more out there that you could model your solution around, but you get the idea of what I’m talking about hopefully.

Beyond getting ideas to get you started in the wireframe stage, finding inspiration can also provide you with some other benefits that aren’t readily apparent. For example, you get to leverage the usability testing other companies have performed. Now, it may or may not be a formal situation in which they’ve done usability testing, but that doesn’t matter at the end of the day. What matters is they have evolved that piece of functionality overtime to better suit their audience needs. Another benefit of using inspiration is you are leveraging something that people have seen before, therefore reducing the learning curve for them. The quicker and easier your audience can move through your application the more likely they spread the word, engaging with the product more and encourage your client to take their application to the next level. All this in turn will give you a happy client who will look forward to partnering with you on their next project. It looks like a win-win situation to me. So go out there, and get inspired!

Originally written for gisinc.com

August 4, 2015 - Comments Off on Daylight Colors for Mobile Devices

Daylight Colors for Mobile Devices

This week I was asked to help out on an application that was going to used out in the daylight on a tablet. I should say the application was already developed, but they couldn't see the application on the screen when out in the daylight. I've never had to worry about this type of situation when designing interfaces in the past, so I was intrigued by the challenge. The hunt was on for a color palette.

As I typically do, I jump onto Google and start doing some searches. I found a lot of folks out their with the same questions I had. "What colors are easiest to see in the daylight on a tablet?"But there wasn't definite answer. Some folks say use high contrast, but don't specify colors. Other's rattled off pastels, which didn't make a lot of sense to me. Then I came across this article, "Display Battle: Which phones and tablets dominate in the sun?" which helped me out tremendously. Though they were not talking specifically about the use of colors in an application, I still found it useful to understand the technology behind the color displays.

So after reading this article and studying the graphics placed in it, I came up with a color palette that works. Let me warn you right now, there is nothing pretty about this color palette. I find it to be quite over the top and outrageous, but there is no place in good interface design for my personal taste.

With that said though, I did add into their interface a toggle to be able to switch between the "Daylight" color palette and the one they were originally using. There is no need for this crazy color palette when the user is sitting indoors working with the app.

 

Color palette for daylight viewing.

July 25, 2015 - Comments Off on Designer Insight for Developers: Know Thy People

Designer Insight for Developers: Know Thy People

A series of tips to help developers improve their interfaces.

Being the sole designer in a company 50ish developers can be a daunting task. With 100’s projects, I’m not always able to jump in and help when there are interface woes. I’ve been wondering for the past several months how I can make a bigger impact without going thru the awkward process of cloning myself.

After our company meeting, Unplugged, it came to me. I needed to take the approach of working smarter rather than harder. In this instance, it means I need to share more of my knowledge, rather than piling on more projects. So this post marks the beginning of my knowledge transfer to developers who want to enhance their interface design skills.

Know Thy People
Typically, this is called “Know Thy User”, but I’ve changed it to people. I believe using the generic term user removes emotions from the equation, which is wrong. People use our applications and people are emotional creatures. It’s in our best interest not to forget this crucial point.

You need to get an understanding of the people who will be using your application by any means possible. Conduct interviews. If you can’t talk to people in-person or via phone, talk to someone who can give some insight. Some information, even secondhand, is useful. Gather whatever data you can find. Be it Google Analytics reports, 3rd party resources, or internal analytic reports. Perform user tests. If a system already exists, gather some users and run them through some of the core tasks the application does. This can be done in-person or remotely. There are several tools out there that can help you out with recording sessions remotely and locally so you can share with a broader group.

If it’s a new application, get wireframes in front of the people, so you can get feedback as soon as possible. The sooner you catch issues, the easier and cheaper they are to change. Don’t worry about things being polished. People like to be involved in the process and see their feedback acted upon.

After all of this curating, you should have a better understanding of how your people differ, what their goals are, what their needs are, how they think, and how they feel. You will begin to see trends/similarities between them, which will provide you with natural groupings. By having these groups to design for, this allows you to focus on the important features that meet the needs of the group instead of random individuals. This makes your job easier.

You maybe be uncomfortable with conducting interviews/talking with strangers and tempted to skip this part, please don’t. You will end up creating something that you “think” is what they want, but the flaw there is it’s your thoughts not the people who will be using the application. So boldly go where you haven’t before and get out there and talk to people!

Originally written for gisinc.com

Don’t make something unless it is both necessary & useful;
But if it is both necessary & useful, don’t hesitate to
make it beautiful.

 

– Shaker Philosophy, #

July 4, 2015 - Comments Off on File Cabinet to Modern Planter

File Cabinet to Modern Planter

File cabinet turned modern planter

I've always loved simple modern planters, but I don't love the price tag that is associated with them. I just can't seem to part with my $200-$500 to put something outside that just holds plants, no matter how lovely it is. There had to be a way to pull off the look without making my wallet cry.

After a little bit of time on Pinterest, I stumbled upon the idea of taking a file cabinet and converting it to a planter. It was the perfect, economical solution I was looking for! Now, I had a plan and I just needed to dig up the materials. Not having an old file cabinet, I bounced down to the local consignment shop to see what they had. After perusing their shelves of treasures, I came across a 2 drawer file cabinet stuffed in the corner and long forgotten. $10 later, the file cabinet was mine.

While I was wrestling the cabinet into the car, I noticed that the bottom was open which would make it extremely difficult to hold any dirt. Not a problem though, I could handle it. I swung by Home Depot on my way home and picked a piece of sheet metal. Since I was there I snagged some paint to updated the look of the well worn cabinet.

At home, I pulled the drawers out and flipped the cabinet on it's back so I could see what I was dealing with. Only things I needed to do was attach the metal and paint it. Pretty simple stuff! After measuring the bottom to see what size I needed to cut the sheet metal to, I put the metal on a flat hard surface and placed a straight edge on my cut lines. There are all sorts of ways to cut sheet metal, so I opted for the low tech version, a sharp utility knife. Since the metal was thin enough, I was able to get away with this method. I scored the metal 7-10 times and then bent the metal at the score to snap off the excess. Once I got the metal cut to size, I attached it to the cabinet with a bead of silicone and sheet metal screws.

After the silicon was set, it was time to beautify this now planter. I scuffed all the surfaces with sandpaper to remove some rust and tape from the cabinet and to give the paint something to stick too. Then it was time for paint. It took 2 spray cans of paint to get the finish I wanted, but it was worth the little extra time.

Overall, I think the piece turned out great and best of all it was easy on my wallet. I've got about $50 invested in this planter and couldn't be happier with way it turned out.

 

From file cabinet to planter.

June 30, 2015 - Comments Off on The Handy Little Display Shelf

The Handy Little Display Shelf

Little Display Shelf

So I looked high and low in stores for little display shelves that could hold a small collection of figures I've bought from a local artist (http://charmedgourd.com/). I only needed them to be 3-4" wide and 4" deep. I couldn't really find anything that I liked, so I thought why not make something.

I went rummaging thru my basement to see what I could come up with. After a little digging, I came up a punched angled galvenized piece of metal. That's a mouth full. Anyways it was a great find, because I wouldn't have to drill holes to attach it to the wall. I wanted this to be a simple build project. You can get a piece like this from your local hardware store for around $10 for a 4ft piece.  Now that I had my "bracket", I just need a little platform for my figures to perch upon.  I went digging in my wood pile and found a piece of thin popular from another project.  Now, I've got all the pieces to build my shelf.

Time for tools. I dug out my Dremel tool and placed a metal cutting wheel in it. I put the metal in a vise and cut it half way between the holes. I aimed for 3 holes per shelf. After I cut the chunk off, I then stuck the filing stone in the Dremel and sanded down the sharp edges from cutting. I highly advise sanding this down. It's really sharp, and if you're not careful you could get a metal burr stuck in your finger. Ouch! From there, I took the wood to the table saw and sliced the platform off.

Now, I had all the pieces. How to assemble? Since these figures don't weight much, maybe 6oz, I opted to use Loctite super glue which works on metal and wood. 20 mins later, I had a little display shelf with an industrail feel. After I glued the pieces together, I had the brilliant idea of staining the shelve to match over wood work in the house. I recommended doing this before gluing. Either way though, I still love the way it turned out.

After everything dried, I was ready to hang it. I noticed the screws  I had wouldn't work. The heads slip thru the holes. So,  I used a washer to narrow the size. I held the washer in place with another drop of super glue. Problem averted. I love super glue.

Now, I have 6 little shelves holding up my lovely figures. The best part. It was made from pieces I had laying around the house!

shelfDetail