You are currently browsing the archives for the Process category.
Written by David Charney
Posted: May 26, 2008 (2 years, 3 months ago) | 0 comments
Hey all. I am happy to announce cd2, the new Chicago Designers & Developers User Group.
cd2 is dedicated to bridging the gap between design & development to improve the user experience and user-centered design. Function meets design in this group as we focus on creativity as it relates to design and development processes and the collaboration between the two.
If you are interested, we ask that you visit our site at www.cd2ug.org and let us know what you would like to see in the group. We will be posting more information soon detailing the group and our first meeting.
Written by David Charney
Posted: May 2, 2008 (2 years, 4 months ago) | 1 comment
We all have our own processes when we design (Whether they are for a UI, print, animation, or whatever). This process tends to evolve through our careers as we define our skills and experience. I will be posting a series detailing my process and other processes when it comes to design and some development in the coming months. For now here is a quick sneak peek, or teaser, showing the process step of sketching your designs before entering Photoshop (or Microsoft Paint - if you are on a budget).
The reason to grab the ol’ pen and paper is because it gives you the opportunity to try out different ideas and layouts quickly. Good design, visually speaking, is a collaboration between brand, color, layout (placement), shapes, and creative ideas as it relates to usability and solving goals. The umbrella that forms from this collaboration is the user experience. But what is the first step? How do you use your time wisely? I know many designers who have found themselves with a lot of time in a design that isn’t working. They spend countless hours moving, tweaking, adjusting, crying. I have been there many times. This is where pen and paper come in handy.
There are actually several steps prior to this one and I will hit them all in time. But for now… Go find a pen, pencil, marker (Prisma anyone?), a sketchpad, sheets of paper, or a big white wall. I tend to start with shapes (squares, circles, etc.) so I can develop basic placement and understand the balance in a scene. I try to work up four or five very unique design sketches. I tend to lean towards a couple and then start detailing more and more. Keep taking steps back to think about how the user will use the design and don’t be afraid to be creative. Don’t focus on just one page either. Let’s say you are designing a website and the main object in the scene is a background shape. Rather than just filling the shape with more content on each internal page, try creating a sketch that shows how on internal pages the UI zooms into different part of that shape. This can motivate the user as they will wonder where they are headed next. It also creates a canvas for unique internal layouts. Sketch quickly. Don’t think to much at first. Start high level and then define more and more. Once you are happy with what you have, it is time to move to the next step. Depending on the project you may want to move right into your design program. You may want to draw up a few cleaner mock-ups for the client to review. After approval (or dreaded feedback), it is on to the next step - drinking a mountain dew as quickly as possible. Seriously that is the next step - look it up. Here are three original drawings and the final designs.
Check back for the continuation of this article… for now I have to run!
Written by David Charney
Posted: April 24, 2008 (2 years, 4 months ago) | 0 comments
Usability - to keep it very simple - in our case means how easy it is to use something. Intuitve - to keep it ultra super simple - means how familiar it seems for the user to use something. User Experience - to keep it mighty wicked simple - means the engagement between the user and the application. To a designer / developer, usability is a key element of quality and creating an intuitive user experience. Why spend so much time on usability? Usability can increase user productivity, provide a higher retention of information, and raise user satisfaction by creating and providing a stronger experience. Understanding what makes something usable or intuitive is never clearly defined. It is based on the client and the audience using it. Usability within a designed application can usually be broken down into six elements that overlap each other to provide a cohesive experience. These six elemental groups are: goal solving, intuitive, efficient, functional, satisfying, and memorable.
1. Goal Solving
Solving the overall goal to fulfill the needs of the client and their audience is the most important of the six elements. At the end of the application’s use, your audience should have fulfilled their need to use the application.
2. Intuitive
Upon seeing your application for the first time, your audience should be able to feel familiar with how to navigate and use your application based on their past experiences and instincts.
3. Efficient
The user should be able to navigate and use your application quickly and in a straight forward manner. Their experience should be productive, not time wasting.
4. Functional
Your application should work correctly and in the same way each time your audience uses it.
5. Satisfying
Your audience should enjoy the use of your application.
6. Memorable
Your application should allow your audience to retain both their experience and information presented to them.
Note: Many designers dislike the term intuitive. This term is good in theory but, as every person is different, it is near impossible to factually say you have created an intuitive experience - but that doesn’t stop it from being a great marketing word! The same goes for all the other elements.
Each of these elements defines everything from the look and feel to the functionality of each component. The amount of functionality is often up for debate within a usable experience. Usability experts can often be split into two groups; those that think the more functionality you can cram into an application the better and those that think the least functionality the better. Both groups will say their way provides the best experience for the user. Keep in mind there are times when each is true, however another approach is available. This third solution involves intelligent placement of functionality so that it is hidden to the user until they use it. The term for this type of ‘hidden’ functionality is called stealth functionality.
An example of this is Google Maps. Those that tend to use the mouse to navigate the map may never think about or realize the keyboard arrow keys can also be used. I have worked with many groups of people who tend to use the keyboard over the mouse. Some may not even have a mouse available.
Don’t assume you have to jam-pack your applications with different solutions for the same problem. You must make the best decisions you can based on the goals of the application and the audiences involved. Find out all you can on the audience that will use your application.
Your Intuitiveness May Vary
So again, everyone is different. And please don’t look up my use of the word Intuitiveness. It isn’t right. So if Tony uses an application he might naturally try and navigate one way while Chris tries to navigate another. Jon might try and right click the mouse to do what Sarah tries to do with the keyboard. Depending on my mood I sometimes use the scrollbar while other times I use the scroll wheel on the mouse. Every person uses a computer differently based on their past experiences. Keep this in mind as you develop. Research and analyze.
Knowing Your User
How do you know who your users are? How do you know what they like or don’t like? How do you know that they like pressing Ctrl-S, open Apple - S, File > Save, or hit that little 3 ½ floppy disk icon (what is a floppy disk?) to save their file? How do you know they will even have access to a mouse or keyboard? The short answer is to ask them. You can do ask them a billion ways and it can be a topic all its own so I will just throw a few on the table. Keep in mind that if you are working on a project for a client, make sure you discuss with them from the beginning the ways you like to get info about their audience so they know what they are in for. OK - some different ways… Write up a survey for them, monitor their computer use, ask them directly what they like or dislike, cook them some pizza, give them some older applications you have created and watch how they use it (you probably have a tendency to build your new program with the same functionality, design, and usability ideas and this can help you learn some new ones), and finally talk to your client as they may be very familiar with their likes and dislikes. Now take all you learned about your user and start thinking about how they can use your new app of awesomeness. Here are five questions to ask yourself (and your user) when creating an intuitive application:
What are the computer habits of my different audiences?
What function does this application have for my audience?
What input devices will my audience have to use?
What are all the various controls or navigation schemes that can be given to each component?
Less is more. What can be removed or integrated to provide a clearer focus on the main goal?
Testing and Measuring Results
Like anything, test and measure your results. When you are in the middle of or complete the project don’t just put it on the shelf. Watch people use it, ask more questions, and make any final changes. Understand how your additions save your users (or client) time, aggravation, and in most cases, money.
The End
Users use programs they feel a connection with. Spend the time to know your user, get creative, and produce an application with an experience they will remember. Oh and have fun doing it! Now go outside.
Written by David Charney
Posted: March 28, 2008 (2 years, 5 months ago) | 0 comments
I gave a short speech to the graduating class of the International Academy of Design & Technology at Chicago. The topic was on the steps between being a student and finding a job. I have had several questions about the topics I discussed and thought I would write up the basics I talked about. I know some of these topics will sound obvious and basic and if you think they are then you are headed down the right track. From talking with students and teachers in the past, I find many students are so overwhelmed by everything in their final stages of school that their next steps seem a little confusing. While every person must find what works best for them, I hope the following topics can lead you in the right direction. I also plan to expand on these topics in upcoming articles.
1. Define Your Goals
Before setting out to find a job, take a seat, find some paper and a pen and start writing down ideas on your long term goals. While you are still testing the waters and understanding what you like doing, creating even rough goals can help to shape your direction. A direction is going to help you strengthen and focus your skills and move up in your field.
Keep in mind your long term goals are not set in stone. You can change your direction at any point in your life as need be.
2. Work as Hard as You Can
This sounds obvious but after talking to many students and teachers, it becomes apparent that the steam can drop off right after graduating. This happens because teachers and parents are constantly telling you to “Work as hard as you can.” every year throughout school. So when many students graduate, their sub-conscious tells them “You are done with school! You don’t have to work hard anymore.” But now is the time to start working harder. And a nice motivator is that now you will be getting paid for it! If you are working a $60,000 project, work as hard as you can. If you are working a $200 project, work as hard as you can. It will get easier, you will produce better work, production will be more fun, and colleagues and employers will pick up on your hard work (which is always good!). So go out there and give it your all!
3. Developing Your Portfolio
Your portfolio is your presentation of yourself to others. It must show off your abilities and work in a quality fashion. Choose your best work for your first real portfolio, even if it is only a few pieces. Spend a little time upgrading any “not so hot” work that just needs some tweaking to be another good piece. It is pretty easy for professionals to tell that a portfolio is all student work but it is also pretty easy for us to tell if there is strong potential. And if a project was created as part of a group, make note of what you did.
If you are having difficulties knowing how to present your work, take a look at what others have done. Note elements you like in the design or presentation and let that stem new ideas.
Pet Peeve: Please don’t name your resume “resume.pdf”. Name it something like “yourLastName_resume.pdf”. It makes it so much easier to store everyone’s resume in one spot!
4. Finding Your Job
I am sure your parents have mentioned this a few billion times. I have three quick tips…
The first tip in finding a job is to look for one. I see too many students that don’t quite open their eyes wide enough to the internet, the paper, or even just cold calling a bunch of companies to request an interview.
Networking is number two on the list. Find events that make sense based on your interests. Go to these events and meet people. Ask them if they know of any more networking events and go to those as well. Keep doing this and soon you will build an umbrella of professionals and potential employers who can help you grow professionally. Online forums is another great way to network yourself to the masses.
Finally, my last tip, which works with my previous tips, is to spend the time looking for a job. If possible work a regular work day. Start looking at 8am and relax after 5pm. This will get you used to a schedule and give you some time to work on your portfolio, research, make calls, network, go to interviews, and get that job!
Note: Don’t let yourself get stuck in a job forever too. If you are not happy with what you are doing and the job doesn’t follow them long term goals, it might be time to take a step back and make a move. Don’t give up too easily. Give your job a chance and work hard at it. Test the waters.
5. Have Fun
My last tip… [drum roll]… Have fun! This is it folks. This is life. Don’t get stuck only looking forward to after work or the weekend. Look forward to work. It is up to you to decide the attitude you are going to have every day. Keep it high and keep smiling even when all hell is breaking loose. Stay creative, work hard, and have fun at work!
Good Luck!
Written by David Charney
Posted: November 17, 2007 (2 years, 9 months ago) | 5 comments
Long before fire, the wheel, and the bagel (sometimes considered nature’s ‘wheel’*), man has yearned for the power to instance layers in Photoshop. This meaning the ability to create a layer or external Photoshop file and reuse the contents (buttons, headers, footers, design components) of that object on other layers and across multiple files. Simply change the layer one place and see that change occur all places. Now I know what you are thinking… “Man I sure could go for some all you can eat shrimp at Red Lobster right now - oh and those biscuits they have…”. I am thinking the same thing. But forget about the shrimp because we are going to take another journey, a journey into Photoshop [place awesome music score here].
SCENARIO OF THE LOST ARC
Jimmy just created four user interface designs for his client. Two of the designs are mock-ups of the home page and two are internal screens based on the home page designs. His designs all have the client supplied header (consisting of the logo and project title) and a button heavy navigational system. All seems good as the deadline is approaching until the client has a few changes for Jimmy. The first change - They want Jimmy to play around with the look of the buttons in both designs. Change number two - There is a new header graphic. Now Jimmy doesn’t want to spend all his time adjusting a button and then duplicating the layers, changing positions, duplicating layers again, changing positions again, etc… Jimmy needs a quick way to do it. But how?
TUTORIAL AND THE LAST CRUSADE
There is a reason most people have not heard much about instancing layers in Photoshop. The reason is because Photoshop was not made to do it the way we would assume it would be done… It is possible to do a couple of ways and these ways are what we will explore. Personally, this humble writer (to keep him anonymous let’s just refer to him as D. Charney) has requested many times over the years that Photoshop make a clean and direct way to instance or reference layers from an external Photoshop file. Many new features and abilities have been added to Photoshop but my request is still passed out on the couch. Depending on your needs you can either use Smart Objects or Data Sets. I will explain both.
Let me go get a Mountain Dew. I am back, sporting my new dew. Sorry about the wait.
Using Smart Objects
Smart Objects can allow you to instance one object many times in one Photoshop file. Make a change to one… and they all update. It is not the best when you need to make an adjustment within multiple Photoshop files.
The good: Use the same layer many times. Make a change to one, update them all instantly. Fairly easy to use.
The bad: A little confusing. Can’t use Smart Objects smoothly across multiple PSDs.
Step 1 ) Create a new layer.
Step 2 ) Draw a button.
Step 3 ) Click Layer > Smart Objects > Group into New Smart Object.
Step 4 ) Now duplicate the layer as many times as you need. Now the client needs a change to all the buttons, like make them red instead of black.
Step 5 ) You can click Layer > Smart Objects > Edit Contents or double-click the thumb image in the layer palette on any layer that contains the Smart Object you need to change. The Smart Object will open in a new Photoshop file (a .PSB file).
Step 6 ) Make your adjustments and Save the file (Don’t Save As! - It won’t link correctly).
Now click your main Photoshop file to bring its focus back and FWAMP!, your Smart Objects will update.
Using Data Sets
Data Sets can let you do a lot more than what I am about to tell you but they can be annoying and a bit confusing based on what you are using them for. On the bright side, Data Sets can let you instance an embedded external Photoshop file over multiple Photoshop files. What sucks is for your changes to the external file to be updated, you need to apply the external file to all other files.
The good: Use the same external file across multiple layers and multiple PSDs.
The bad: A little more confusing. More steps in every aspect. Meh.
Step 1 ) Create three files. Two files to act as two main designs, and one file to act as the external file to be embedded. Save all of them in the same directory.
Step 2 ) Go to the external file and draw in some shapes. Keep it creative. I will wait. Save your changes.
Step 3 ) On one of the two main designs, create a new layer and click Image > Variables > Define to open the dialog box.
Step 4 ) Check the Pixel Replacement check box. Choose As Is from the Method drop down box. Adjust the image alignment if you would like.
Step 5 ) Click the Next button to jump over to the Data Sets area. Click the tiny little floppy disk icon with the green arrow to create the data set. Click the Select File… button and choose the external file you saved earlier. Click Open and TA DA, there is your image on the canvas. Make sure you hit Apply or all hell will break loose. Then hit OK.
Step 6 ) Follow from Step 3 through 5 on the second main design PSD and make a data set with the same external file.
Step 7 ) Now go back to your external image and make some changes. Save the file. Go back to each main design file, click Image > Apply Data Set… and click Apply. You should see your external file update.
You can’t just copy a layer and have it update next time you re-apply the data set. You have to create a new layer, make a new data set, apply the external file to it, and when you want to update it you have to click each data set to apply the changes. This can be annoying but much quicker than making adjustments and copying and pasting 200 buttons around a UI.
The potential power of instancing layers in Photoshop is clear and can be very helpful. I hope Adobe sees the power as well and develops a real tool to do this quickly without the above tricks to sudo-do what we want. There are a lot more settings I skipped over on each method so please explore and have fun!
* After some extensive research I have become aware that the bagel has never been referred to as nature’s ‘wheel’ and apologize for any confusion or ‘ruined lives’ that resulted from my misstatement.
