-
5 months ago
Web Form Blunder: Act of Labels Placement
Have you read the book name “Web Form Design” by Luke Wroblewski? If your answer is Yes then you must know there are Three known standards for placing the labels on the form. Left Align, Right Align and Top Align (from Field / Textbox). If your answer is in NO then fret not! Read the brief intro of it from Luke Wroblewski’s website http://www.lukew.com/ff/entry.asp?793 .
Again, see the screen-shot above from the Harvard Business Review’s Newsletter sign-up form (http://hbsp.ed4.net/prefcenter/signup.cfm). That’s an epic failure of the design. I see here that user will suffer the “Puzzle Thinking Syndrome” for such a small task. Why not follow the tried and true standards while developing the web forms, and put the Homo-Sapiens at ease.
My humble 0.02 User Experience/User Interface Cents.
-
6 months ago
Fresh Experience Engaged
Finally, I am able to get the nice skin for my Blog, for last few weeks I was looking for something new and fresh, here it is.
Stay tuned, I am gonna be posting my experience with Google Android Phone and iPhone, from a Homo-Sapien perspective. Thanks to Alan Cooper’s book “Inmate Running the Asylums”. I learned a lot of stuff from this book, highly recommended for those who are newbies like me in Interaction Design.
Keep your inner Homo-Sapien Happy.
-
7 months ago
UX Two Cents: Amazon’s Add to Wish List
Recently I noticed strange behavior with the “Add to Wish List” button on Amazon.com. When I already added the book in my wish-list, why I keep seeing this button, why there is no UI indication that the following book is already added in to my wish list?
In my opinion there should be a Text Blurb that says “Item you are trying to add already in your Wish-list” and a little link that takes me to my wish list. Instead when I click on the Add to Wish List button and then see the already exist message.
Just my UX Two Cents. -
8 months ago
How to write a Functional Specs
As a Information Architect and/or Experience Designer you usually involve in the Functional Specs writing too. Thats how they rock!
In my recent experience I noticed few things related to the Functional Specs, they are dry and boring, they won’t offer the “interactivity” or “energy” related to the project.
As per our human nature (remember developers are humans too, pun intended), we enjoy a good movie, novel or any short stories. So why not inject that idea in to our Functional Specs for our project. This is in my opinion a superb way to keep the reader (client, project manager, developer, even investors!) enhcanted with the project and this is the power of “Story”. Explaining the shopping cart process in a story mode is always good for mind, won’t give you the “pressure” and won’t make you “sleepy” while reading it. For instance here is what a typical Shopping Cart Procedure explained in the Functional Specs:
Typical Specs:
As seen on FireBird CMS Functional Specs, you will notice the typical functional specs are just a collection of objects, for instance:
Ecommerce and Online Product Catalogue Features
4.1. Product Catalogue
• List products (Thumb, Title, Small Details, Price, RRP, View, Add to Cart)
• Pagination
• Search by Title and DescriptionNow imagine if we can explain this in a “Story Mode” which I think is the best way to explain, even the non-techie people will understand.
“Product Catalogue: Shopping need catalog too, the best way to present the catalog is by introducing the User with the list of product with the Image of the Product, brief description and the price, if necessary we will allow user to add the product right from the Catalog to the Shopping Cart. Every user has their own prefrences we will provide them a “Pagination” feature, this will help them to paginate the catalog according to their need, we will allow them to paginate the product by viewing only 10 products per page, or 20 or 50 at max.
We will give them the ability to filter the result according to the keywords they are interested in”
Now see the big difference here, I am sure there are certain experts out there who follow that “Story-mode” religiously. But mostly things are explained in the tech-world, especially the Funtional Specs (which they usually treat as a bible of the project, no doubt about it, it is the REAL MEAT)
So the point here I would like to present is… The superb way to present the Functional Specs is using the power of Story, which includes all the detail related to a project in such a way that it won’t become only the “Developers Note” but also shared among the Clients and the Project Owners.
-
9 months ago
CliqCliq Colors: Very handy app for newbies and experts designer alike.
I generally use this app to capture the impressive colors and steal them for my ideas.
One annoying factor I noticed the Upper-Right-Corner button. It from first impression, sounds like a Settings Button. Where you can set your preferences. Problem is, it is not exactly like that. You will need this button to export your color plates and along with some settings and I do recommend it would be great if the UI especially Navigation Bar/Buttons must have more precise and general-convention-oriented icons.
Overall, the learning curve is not too steep except the above captioned annoying icon representation.
Update: There is a save button appears once you ready you Color grab. Once you click the save button it does took you to the screen where you can see the previously saved plates. Only issue I noticed is the Buttons are too tiny. And it’s like you need to snipe the tap very precisley.
It would be great if icon on the upper-right corner had a text instead of icon. I would suggest “Archieve” is the suitable for it.
-
9 months ago
Curious Interface of ATM Machine
Since I start getting deep in to the rabbit hole of Experience Design. The Experience sensory in my mind keep bugging me with so many annoynace with machines that is scattered at work at home or almost whereever I go and interact with them.
The first annoynace I experienced deep inside me is the ATM Machine.
They are your window to access your securely store stashed in your secret bank accounts!
Well the frustrating moments starts like this:
- Please insert your card
- Enter your pin number, then Press Enter or “#” hash sign.
- Do you want to Check your balance? Yes / No.
- Withdraw, Deposit, Check Balance, Quick Cash … Pick one.
- If Withdraw selected we asked for $20, $40, $60…..$200 and Other Amount
- You clicked “Other Amount” and entered “$15” and it says you can’t do that, and gives you the math problem to solve to get the amount (divide by 2).
- Do you need the receipt? Yex/No
- More Transaction? Yes/No
Wow! So many things that scary devil asks me! Why not it should act in a way I want it to?
- Swipe
- Enter Pin
- From your last transaction you requested $15. Should I spit the same amount. Yex/No ELSE
- Enter the Amount or select the amount ranging from $20 to $200, I picked $200.
- “Thanks, see ya later”.
The reason things I am wondering about is “Remembering my Preferences”, in case of special occasion, I can pick the “I need Receipt this time now” option, if I want to from the different screen, by selecting that option.
But please don’t ask too much question for a small task. Do honor the user time while designing the interface, don’t make them think, and allow them to get thing done in a swift moment, without any error or annoyance.
-
10 months ago
Follow-up: Twitter Favorite Harvester in C#, refactored
Here is the improved code, now it won’t run in to the Twitter Request Per Day Limit.
static void Main(string[] args)
{
/*
* URL for Favoirtes: http://twitter.com/favorites/YourUserNameOnTwitter.xml?page=1
*/
WebRequest req;
req = WebRequest.Create( (string.Format(“http://twitter.com/favorites/YourUserNameOnTwitter.xml?page={0}”, 1)));
NetworkCredential creds = new NetworkCredential(“YourUserNameOnTwitter”, “YouUserNameTwitterPassword”);
req.Credentials = creds;
req.Method = “GET”;
string respString = “”;
for (int i = 101; i < 160; i++)
{
req = WebRequest.Create(string.Format(“http://twitter.com/favorites/YourUserNameOnTwitter.xml?page={0}”, i));
WebResponse resp = (WebResponse)req.GetResponse();
Stream respStream = resp.GetResponseStream();
StreamReader reader = new StreamReader(respStream);
respString = respString + reader.ReadToEnd();
reader.Close();
respStream.Close();
resp.Close();
Console.Write(respString);
}
// create a writer and open the file
TextWriter tw = new StreamWriter(“C:\YourUserNameOnTwitterFavorite.txt”);
// write a harvested favorite tweets to the file
tw.WriteLine(respString);
//TODO: Parse the XML, and then make it available to be searched by Twitter UserID, Keyword, and harvest the URL out of it!
Console.ReadLine();
}Grab it while it is hot!
Anyone out there who wanna work with me to improve it? Sky is the limit people!
-
10 months ago
Twitter Favorite Harvester in C#.
Finally able to get the Favoirte (in a XML format) from Twitter with that nifty script, I encouraged anyone out there to improve it and share it here, and we can build a nifty tool that will feature as follow:
- Export the cool links from your Twitter Favoirtes to Digg or Delicious Account or Bookmarks2.com
- Export the harvested Links to Firefox or any browser
- Export the Fav. Tweets in a nice “Reousrce” file or whatever the storage you are using.
- Share among friends.
Sample Code is here, please provide your feedback, I encountered the Request Limt from Twitter, but if you know the better way and to beat the limit, it would be awesome:
static void Main(string[] args)
{
/*
* URL for Favoirtes: http://twitter.com/favorites/YourUserNameOnTwitter.xml?page=1
*/
string respString = “”;
for (int i = 95; i < 96; i++)
{
WebRequest req = WebRequest.Create(string.Format(“http://twitter.com/favorites/YourUserNameOnTwitter.xml?page={0}”, i));
NetworkCredential creds = new NetworkCredential(“YourUser”, “YourPassword”);
req.Credentials = creds;
req.Method = “GET”;
WebResponse resp = (WebResponse)req.GetResponse();
Stream respStream = resp.GetResponseStream();
StreamReader reader = new StreamReader(respStream);
respString = reader.ReadToEnd();
reader.Close();
respStream.Close();
resp.Close();
Console.Write(respString);
}
// create a writer and open the file
TextWriter tw = new StreamWriter(“C:\FavoriteFile.txt”);
// write a harvested favorite tweets to the file
tw.WriteLine(respString);
//TODO: Parse the XML, and then make it available to be searched by Twitter UserID, Keyword, and harvest the URL out of it!
Console.ReadLine();
} -
10 months ago
The experience is like a thrill rides in these Road Roller Coaster! They are Pakistanis Special Public Rides. If you ever want to experience the thrill-on-the-road, visit Karachi, and ask the driver to take you from M. A. Jinnah Road to Urdu Bazar or Karachi Stock Exhange. You will have ride of your life…. Rickshaw, the Ultimate Go-Green Hater
-
10 months ago
Jack Moffett on Passionate Designer
Couple of weeks ago when I was reading the Luke Wroblewski’s Web Form Design, I came to know about Jack Moffett, and he just inspired me with his knowledge in Interaction Design (IxDA) and his passion, so withtout further ado, please welcome Jack Moffett on BonGeek’s Blog:
Mudassir (thats the BonGeek) invited me to be a guest on his blog. For those of you not familiar with DesignAday, I post every weekday on design-relevant topics. I’ve discussed service design, education, innovation, interaction design, product design, advertising, process, and examples of bad design found in my environment, as well as many other topics. When Mudassir first introduced himself, he informed me that he was just getting into the field of Interaction Design, and was looking for some advice. Following in that spirit, I decided it would be appropriate to write about why you should, or perhaps shouldn’t, be a designer.
To be a truly outstanding designer, you must be passionate about your work.
This was the advice I relayed to my students as they wrapped up their final semester. It is possible to be talented without passion. It is possible to be interested, or very knowledgeable about design. You can even be successful without passion. But every designer I’ve considered to be inspiring—and I’m not just referring to design celebrities—has been passionate about their profession.
Certainly, this isn’t unique to design. There are many professions I believe this applies to: teaching, medical and social professions, and political positions, to name a few. That doesn’t make it any less important to design.
Dan Boyarski, who recently stepped down as chair of the School of Design at CMU, immediately comes to mind when I think of passionate designers. Dan exudes passion—there is excitement in his manner and a twinkle in his eye. He has an intense curiosity about, well, everything. And his passion is infectious.
It’s a passion for design that drives me to continually strive to increase my knowledge, add to my skill set, improve the quality of my process, and refine my craft. It is passion that finds me spending much of my free time reading other designer’s blogs, industry publications, and the IxDA forum. It is passion that pulls me into volunteering to co-chair the local IxDA chapter, serve on the planning committee for the next conference, or participate in the organization’s initiatives. Passion has landed me in an adjunct faculty position teaching design. Passion often sees me writing for my blog at 1:00 am.
A passionate designer sets his own standard. A passionate designer produces good work, not because she is trying to meet her supervisor’s expectations, nor because she is looking for a bonus or praise, but because it is the way it should be done. When it comes down to soup and nuts, good design is about helping people—improving their experience in some way—and that is a mission worthy of passion.
Are you passionate about design? Perhaps you aren’t yet, if you are just starting out. In that case, look for the passion. If you don’t find it, perhaps you should think more about where your passions actually lie. When you do find it… well then, you’ll know what to do.
Jack Moffett of DesignAday
-
10 months ago
Balsamiq Mockups: UI Elements for iPhone Application Part 1
Balsamiq Mockups from iPhone App wire-framing perspective…. Fortunately for any Experience Designer who religiously follow the wireframes ideas, related to websites or software, targeting any platform: mobile or desktop, is blessing in disguise, yes I used the word disguise, because I noticed whenever someone talk about Balsamiq Mockups they usually love to talk about Website Wireframing and Software Wireframing, but iPhone App UI Wireframing never discussed. I would like to point out the key Mokcup Elements available in the Balsamiq Mockups for iPhone UI Elements. iPhone Menu: You will notice the iPhone Menu Mockup is rich with the elements that needed in any general iPhone App, see figure 1 follow
Lets explore it one by oneFor a simple label “This is a Label”
To mimic the Delete Button type (without quote) “- Delete Button”.
To produce the Add Button : “+ Add Button”.
Sub-Menu UI representation can be achieved by using the “A Sub Menu, >” command, where “A Sub Menu” can be the text of your desire, and “, >” is the real meat here. Here comma “,” will right-aligned the “>” / Greater-Than Symbol. From iPhone Human Interface Guideline, this navigational icon falls in Tab Bars UI elements.
For Label with Sub-Label the syntax is simple “Label and, Sub-Label”, again comma / “,” is to right-aligned any text it is similar as Sub-Menu except we are using Text instead of Symbol to produce the “Label & Sub-Level” effect.
Checkbox / Checkmark is interesting, to produce the “checkbox/checkmark” effect use “v A Checkmark, (>)” syntax. “v” is to produce the “Checkmark” and (>) is for “Detail Disclosuer Button” .
To produce the “Bulleted List” use “*” / asterisk,
Toggle Button’s “On & Off” state sketching can be done by using “Toggle button, ON” and “Toggle button, OFF” command in Balsamiq Mockups.
In my next post, we will explore more iPhone related UI Elements goodies in Balsamiq.
Happy Wireframing!
-
11 months ago
CliqCliq Colors: The best app if you are the designer and want to capture the everyday color inspiration.
Annoying factor in this app? The Top-navigation bar, with tiny buttons. Unfortunately if you have thick fingers, you won’t be able to tap it nicely. Design the buttons as they are meant for Humans. Don’t design it for the Zombies / Vampires, because they are not the users of the app. As I am pretty much sure they don’t have iPhone and don’t require any Cell phone. Design it for human.
Buttons are great if they are used it wisely in the app, especially in the Navigation Bar.
-
Notes: 1 / 11 months ago from designaday
Designing for Touch Screens and Interactive Gestures
I attended Dan Saffer and Bill DeRouchey’s workshop at Interaction ’09 titled Designing for Touch Screens and Interactive Gestures. While a lot of good information was communicated (Did you know that the largest portion of the brain is devoted to your mouth, while the second largest controls your hands?), much of it was old hat for me. I’ve been designing UIs for tablet PCs with touch and/or stylus input for about as long as I’ve been working in the field, and most of the considerations are the same. For example, it is better to place controls at the bottom of the screen, rather than the top, because in reaching for the controls at the top, you obscure the screen with your hand and arm.
What I found most valuable was the exercise. I’ve never thought highly of paper prototypes. I know, a lot of designers swear by them, but I find them much too tedious to be of use. I can spend the same amount of time or less creating an interactive prototype in Director that is the same or greater fidelity. In my opinion, paper prototypes work well for very simple interactions. Once you start rigging scroll bars with string, you are taking things to a ridiculous extreme.
The workshop, however, made me realize that the new frontier of large scale, touch sensitive displays is the perfect application for paper prototypes. I stated that paper prototypes work well for simple interactions. I now believe it can be measured as a bell curve. In the middle, there is a large area of medium complexity that is too tedious to model with paper and only moderately time consuming to represent in software. Then, as you push beyond the fat point of the curve, you get to a level of complexity that is quite difficult to model with our current, computer-based tools, and paper comes to the rescue.
Our class had been broken into several groups, and we were tasked with designing a music purchasing experience for a retail space. We were given a size constraint, which was, conveniently enough, approximately the size of the circular dining tables at which we were seated. We used paper, markers, and tape to hastily create a very rough prototype of our solution, which borrowed heavily from Microsoft’s Surface. I was particularly fond of our solution, but I was very impressed with how well paper worked in this instance.
It lends itself perfectly to the problem space. You can’t prototype at that scale on a computer screen. You would have to do some pretty fancy stuff to get a projector hung straight down from the ceiling, and then mimic the users motions in near-real-time to make it at all feasible in software. With paper, you can make every element to size, and the test subject can slide pieces of paper around as much as they want.
I don’t know how long it will be before I have the opportunity to design such an interface for real, but I do know that when that time comes, I’ll likely be adding paper prototyping to my toolbelt.
-
Notes: 1 / 11 months ago from designaday
Teaching Everything
Leslie Jensen-Inman published an excellent article on A List Apart in January titled Elevate Web Design at the University Level. She discusses the fact that universities aren’t able to keep pace with web technologies and that their graduates are not prepared by the time they graduate. It isn’t an empty claim—she interviewed thirty-two web design leaders about the issue. In the article she makes many suggestions as to how institutions and professionals can address the problem.
As a professional interaction designer that works on web-based applications and teaches design, it is an issue that I am quite aware of. As I have explained before, the program in which I teach is a traditional graphic design program, by which I mean web design is not its forte. I’m doing what I can to change that.
The largest problem, as I see it, is that there isn’t enough time to teach everything. Design is not typically taught in High School, so students must go from knowing next to nothing about design to professional in, sometimes, less than four years. In the case of the program at WVU, students don’t have a design class until their sophomore year, after which they must submit a portfolio for acceptance into the graphic design program that continues through the junior and senior years. During that time, there are still other art courses they are required to take, so it is not as if they are strictly focused on design during those two years.
So, how then do you fit in all of the skills that they are expected to know? It’s nigh impossible. And it keeps growing, with the additions of interaction design and the web, service design, etc. When I was a student, I was taught the basics of Photoshop, Freehand, and QuarkXpress in class (although I had already taught myself Freehand). When I say “the basics,” I mean it. It was up to me to continue using the software in my project work and learn it by doing. I was one of a very few that stretched out to learn Director, and the only member of my class to utilize Premiere, Authorware, Infini-D, and Morph during my senior year. In graduate school, there was no instruction in software. I had one class that taught the basics of Java. I learned on my own how to build a webpage in Pagemill, and then later GoLive. I taught myself how to use a Flash competitor that specialized in animating text, the name of which I can’t even remember.
The point I’m trying to make here is that the technology, be it software, hardware, or scripting languages, shouldn’t be the focus of design education. It changes rapidly, and what you learn one year will be obsolete the next. Most of what I was taught in class during my time at WVU and CMU is just as applicable now as it was when I graduated. Students need to understand this and take much of the responsibility upon themselves to stay current with tools and technology.
That’s not to say that faculty shouldn’t worry about staying up-to-date themselves. They should take every opportunity to include the technology in their teaching. For example, I just gave a lecture a couple weeks ago on web typography that was based on a series of HTML and CSS examples. I showed the students how many of the nuances of typography that we had been learning so far could be controlled through a stylesheet. But I don’t have time to teach them HTML and CSS, nor should I. It is my job to instill in them the foundational knowledge of typography that will be applicable regardless of what capabilities CSS 4, 5, or 6 will have.
-
Notes: 2 / 11 months ago from designaday
The abilities needed in order to be an Interaction Designer
Carl Alviani writes in his post on Creative Seeds titled Five things Interaction Design probably isn’t:
I went to Interaction09 in Vancouver with an intense personal mission to nail down a clear definition of Interaction Designer, and what abilities are needed in order to be one. Almost every time I asked (and I asked a lot of times), the answer was “I have no idea.”
Well, Carl, I’m sorry you didn’t find the answers you were searching for. I find it somewhat embarrassing. All I can say is that you must have been asking the wrong people. I know a lot of designers attending the conference that would have answered your question in great detail. The answers would likely vary a lot, but that is because there is a wide range of activities covered under the IxD umbrella. I don’t recall meeting you, so obviously you didn’t ask me. Let me answer your question now.
The abilities needed in order to be an Interaction Designer:
- You need to be able to learn about activities and tasks that a person participates in through observation, conversation, and research. This typically involves discovering pain points—things that are difficult or unpleasant—as well as what they identify with. It also involves understanding the larger context, including business goals of your customer and concerns of any other stakeholders. You must be able to record what you learn and communicate it to others.
- You must have a foundation of knowledge about visual communication, human behavior, organization, and the medium in which you are working, providing the skills and experience for number 3.
- You need to be able to creatively develop solutions based on what you have learned. As you point out, for the majority of us most of the time, this involves some type of computing device that will in some way improve the person’s experience, making the activity easier or more enjoyable. It may be a hand-held, a piece of furniture, or the box under the desk. There are many different approaches, techniques, and tools for accomplishing this, and there are many debates as to which are more effective, but as Jamin Hegeman pointed out, “any design field is not about its tools, as tools change. Designers use the tools necessary for the given project, and often learn new tools or make their own.”
- You must be able to document the solution and communicate it to others. This may involve drawing, diagramming, writing, and speaking. It may involve documents, models, movies, animations, and acting. It likely requires different types of artifacts and different levels of detail for the different people to which you must communicate.
- You need to be able to work with other people with widely varying skill sets to make the solution a reality. There’s a good chance you will be working with software engineers. You may also work with sales people, business people, domain experts, cognitive psychologists, graphic designers, industrial designers, information designers, and architects. You will certainly be working with customers and users. You must understand the relationships between them, each of their requirements, and work as a negotiator and synthesizer.
- Finally, you must be able to evaluate success or failure of your implemented solution, which takes you back to number one, starting the iterative process all over again.
Admittedly, this is a very high-level overview of the abilities that are needed to be an Interaction Designer. In fact, for the most part, they are the abilities needed to be a Designer—period. What differentiates an Interaction Designer from other types of designers is in large part the artifact (and I use that term loosely) being designed.
and User Experience Designer & Software Architect
Following
