vertical text rotation with css
Posted by: Wenbo in: ● October 18, 2009
- In: Technical
- 4 Comments
The short answer for this blog is:
vertical text tag cloud effect preview
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
I’ve been working on a very interesting project and one of the desired feature is a fancy tag cloud with variations in color, size, and text alignment. Tricks with color like depth or text sizes are pretty straightforward; however, the vertical & horizontal text alignment is not as easy as his other two fellow requirements buddies.
After digging thru piles of rss reader records, I found css sprite is a good answer. Here’re an article explaining detailed implementations, step by step, and a sample image (upper half demo effect, lower half css sprite compositions).
Vertical text rotation using css sprites
However, some brilliant people found a better way by employing css without sprite graphics. Link. He is using
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Explanations to the code: webkit-transform is the Safari core based browser’s support for vertical text, -moz-transform is the Mozilla Firefox counterpart, while the last DXImageTransform is the Microsoft IE Method.
Finally, after looking up into the css 3 standard, I found the lenghty IE vertical text support is trimmed and it is included in the css 3 standard:
writing-mode: tb-rl. Therefore, the final solution is
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
I hope my article can be of use to you. 
fun and usability
Posted by: Wenbo in: ● October 13, 2009
The video clip above is “piano stairs” which is a super fun design with raging success. This design successfully increased the percentage of people taking stairs instead of elevator by an astonishing 66%! Frankly speaking I hope San Francisco or my company can have a piano stairs.
Now I would like to discuss on the fun & usability. As a user experience professional, I always keep users’ goal in my mind such as running a search query, adding to cart, registration, placing order, which is a standard and correct process. However, we ux professionals’ goal s not only to help user achieve their goal in a pain-free process, but also keep the user engaged. According to D. Normans “Emotional Design”, adding positive emotional qualities (in this case, fun) in a design changes the user’s overall perception of the products utility and usability—PERCEPTION.
Here are some more examples,
Google Reader Fun (classical contra cheat upup downdown left right left right BA)
Flickr Fun Greetings
Some people may argue we should never compromise usability for fun. I am with this idea, partially, cuz I believe, fun complements usability. So, you have any fun products in your mind?
a revision on 10 useful usability findings
Posted by: Wenbo in: ● October 10, 2009
Recently SmashingMagazine has a delightful and interesting post, “10 Useful Usability Findings and Guidelines” which compiles valuable usability findings and illustrates with screenshots. I would like to tip my hat to the author and I have something to add to this article.
The 10 usability findings and guidelines are
1 Form Labels Work Best Above The Field
2 Users Focus On Faces
3 Quality Of Design Is An Indicator Of Credibility
4 Most Users Do Not Scroll
5 Blue Is The Best Color For Links
6 The Ideal Search Box Is 27-Characters Wide
7 White Space Improves Comprehension
8 Effective User Testing Doesn’t Have To Be Extensive
9 Informative Product Pages Help You Stand Out
10 Most Users Are Blind To Advertising
Bonus: Findings From Our Case-Studies
The Author concludes that “Form Labels Work Best Above The Field” and the graph is pretty self-explanatory. However, this will works primarily in simple & short data form; in other words, registration & login page. If we take more scenarios into consideration, we can see that a more data intensive form requires a different distribution. LukeW’s famous book Website Form Design is a perfect reference: If the form is long but only asks for simple data, opt for right-aligned labels placed to the left of the field.
sample form registration usability
The second point is the tendency of users’ focusing on faces. This is a debatable issue; According to William Hudson, the existence of human face may increase the possibility of users’ recognizing it as an ad; which can also possibly apply to the tenth point.
human face as possible usability indicator
I agree with the third issue aesthetics as an indicator of credibility; and don’t forget usability may also be an important factor here.
The eighth finding “Effective User Testing Doesn’t Have To Be Extensive” conincides with Jakob Nielsen’s classical conclusion, five to seven is the optimal number for usability testing. The author brings an addition: any usability testing is than none. This is a great point and I would like to add: do usability testing as early as possible, hence alleviating the amount of changes in software architecture or product industrial design.
usability testing participants number graph
Btw, the bonus point “typography”, the optimal ratio of Line height (in pixels) to body font size (in pixels) is 1.48. I would highly recommend this finding. The 1.5 line-height eases reading and reduces visual load, it’s a great practice.
Lastly, I would like to conclude that this article is a great introduction to people new to the world of web usability. If you are potentially interested in more studies or more generic usability research, Jakob Nielsen’s alertbox is a perfect resource.
frbsf.org redesign
Posted by: Wenbo in: ● September 24, 2009
Our team is working very hard on redesigning our website, and I really would like to spend some time discussing this project here.
We are following a typical user-centered design process. Interviewing stakeholders, conducting contextual inquiries, translating business needs into tech spec, aligning business objective with user goals & technical constraints and doing competitive analysis are our five major tasks this month. Your inputs are more than welcomed!
The app I designed has been featured on engadget
Posted by: Wenbo in: ● August 25, 2009
Super excited. I was working in Asus this summer as an interaction designer contractor, primarily being responsible for eee tablet pc and laptop touch screen app design. The app and the tablet pc have been both featured and blogged on famous tech site engadget.
Asus Eeetop Touchscreen Tablet
The experience was fabulous;
- I had a chance to work on the secret Windows 7 platform and explored the superior touchscreen support
- My role is a hybrid of product manager and interaction designer. I worked directly with a product manager, who is a marketing genius, and developers, brilliant guys from China, Taiwan and California;
- I learnt a lot from my manager Eric, a veteran interaction designer.
- I developed lo-fi prototypes and hi-fi prototypes, discussed technical constraints with developers, and helped set up the project management plan.
If you hope to learn more about my roles or want to have a chat about the difference between resistive & capacitive touchscreen, feel free to drop me a line.
how to remind users not to quit before registration finishes
Posted by: Wenbo in: ● July 31, 2009
This post has some amount of technical discussion.
Our team received a problem reporting that user tends to quit before clicking the final confirmation while using an online reservation system. We looked into the system, analyzed the whole reservation process and got several findings.
* Unclear action items
* Lack of user’s status in the process
* No error proof mechanism
We came up with solutions addressing these issues and took immediate actions.
* I redesigned the button, making it feels more web 2.o and as a result the button popped out from the page, successfully drawing users’ attention.
* I added reservation steps to the system. Step 1 to 5, giving users a clear visual clue of his status and what’s remaining.
* I employed onbeforeunload function to help with the error proof. Whenever user tries to close the window or leave the page, a warning dialogue will popup “Are you sure u want to leave the page? Press Okay to continue”
frbsf online tour registration system error proof
HOWEVER, my supervisor had a very insightful comment “What if the user intentionally click the back button to go back to previous page, the warning dialogue will be a hassel.” Yes, that’s quite to the point and I added a javascript function, detecting the x&y coords of mouse, deciding whether user tries to click the browser back button or to close the window. To make things even trickier, IE and FF have different mechanism/parameter for detecting x and y coords.
Some experts had a similar solution on the internet before and I tweaked the code a little bit, I would be really glad if my snippet can be of use to you.
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
document.getElementById(‘mydiv’).firstChild.data=’X=’+posx+’ Y=’+posy;
}
window.onbeforeunload = function (evt) {
if(posx>=350){
var message = “Please note: If you continue, your tour reservation will not be completed. “;
if (typeof evt == ‘undefined’){
evt = window.event;
}
if(evt) {
evt.returnValue = message;
}
return message;
}
}
BTW, my employer, Federal Reserve Bank of San Francisco offers very nice tour service, don’t forget to register online at the official website.
Welcome to University of Michigan
Posted by: Wenbo in: ● July 10, 2009
- In: Academic
- No Comments
Now that I’ve received my master degree in Human-Computer Interaction from University of Michigan, working happily as a user experience people, I would like to share some of my thoughts of my alma mater, precious moments of my study in School of Information and I’ll be very glad that this short post can be of use to you.
I studied in School of Information which is an ischool enjoying high academic reputation and having strong faculty resources. If you ask me why I chose or applied to UM, I would say, well, the ischool stayed in top 3 nationalwide for quite a while and I feel really proud to be admitted to the program.
School of Information Website
We have eight concentrations, * Archives and Records Mgmt * Community Informatics * Human-Computer Interaction * Incentive-Centered Design * Info Analysis and Retrieval * Information Policy * Library and Info Services * Preservation of Information and * Social Computing.
I majored in Human-Computer Interaction and I took a bunch of courses from Incentive-Centered Design (which is primarily about information economics and management.) All concentrations have world-class professors, to name a few, Jeff Mackie-Mason, George Furnace; plus, the course setup helps you build a solid foundation for your major knowledge, in the meantime you will also have the freedom to select course you like, you will be encouraged to take internship which count toward your credit(yay) and you will have to take cognate course to broaden your eyes.
The students here are top-notched and yes, I am not kidding. We have students joining CHI conference (which is the most influential annual conference on human-computer interaction) doing the student design competition and we are frequent 1st prize winner. Yes, the 2009 winner is from us. Besides, we have students publishing research papers in this conference; I am honored to be one of them, joining the sustainability panel in CHI 2009.
During our extracurricular time, we have plenty of student organizations doing research, connecting with external clients, watching football game in the largest stadium nationalwide(Go BLUE!), hanging out and having happy hour. Probably you may learn more stuff from these after-school events. One shining point I would like to stress is the Alternative Spring Break program (this was unique in US); the school is contacting some companies & organizations, bringing short-term internship opportunities to students during spring break. I interned at Library of Congress and the experience, was really rewarding.
I didn’t receive a penny for writing this post; this comes from my fervor for School of Information, University of Michigan. If you would like to learn more, feel free to drop me a line. I would love to help.
Ah, did I mention that we have superior career service?
Search
Category
- Academic (1)
- Product Management (2)
- Technical (2)
- User Experience (12)