Having been in the industry for (eesh) 17 years+ now, I still remember (and regularly lecture on) the issue of bandwidth consumption and preservation and how poor performance is related to it. jQuery, which I love, is no pipe-hog by any stretch of the imagination, but it still comes with a bit of bloat attached in the form of methods you don’t need or use most of the time. Enter jquip, or jQuery-In-Parts, a stab at minimizing and modularizing the jQuery library. For more info and download, go to the jquip GitHub.
I’ll let you check out the rather extensive method and event list, but be assured that the things we really like about jQuery – the $(selector), the quick data methods, and several events for data handling – are all there. Plus there’s several plugins to tack on more methods and events without the total KB package jQuery sits on right now.
On the flip side, if we could just get everyone to DL the .js from the same source URL (such as //ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js) and reinforce caching, we wouldn’t have as much problem anyway.
[original article by Gerry McGovern, my commentary here]
Mobile is a platform. It is a tactic, not a strategy. What you need is a strategy for the connected customer.
If a Norwegian man is sitting on the toilet reading the news on his iPhone, is he mobile? Well, research indicates that one of the most favored places where Norwegian men use their phones is on the toilet. iPads are used a lot on the couch but the iPhone is more popular in bed.
Mobile is not necessarily mobile. It is flexible, convenient, fast, and private. Pictures of sexually transmitted diseases are often accessed through mobile devices. This could be because mobile is particularly favored by young people. It could also be because a phone is more private than a computer. A number of people might have access to the computer you use, for example.
I’ve read that mobiles will be used a lot this Christmas, particularly for last minute gifts. That implies that people using them may need advice on what to buy, because by definition they will not be buying for themselves.
“Desktop copywriting must be concise. Mobile copywriting must be even more concise,” Jakob Nielsen writes in his article ‘Mobile UX Sharpens Usability Guidelines.’ We need more than content reeducation according to Jakob. “The feature set should be much smaller for a mobile site than for a desktop site.”
However, the customer is not always in a hurry. Some people read more on their smart phones than they read on websites. So, one of the most important links any mobile website can have is a link back to the main website.
A major weakness of organizations is that they behave reactively rather than strategically. “We need a mobile app.” “We need to be on Twitter.” “We need more video.” “We need to blog.”
Web strategy is far more about psychology than technology, blogs, Twitter or any other forms of content. The more people use the Web to live their lives and do their jobs, the more web professionals need to invest in understanding human behavior. This is because the Web removes the human touch points, the opportunities to observe, the empathy zones.
Continue Reading →
So after a 7 month hiatus, a hard drive crash, and a job change, I’m finally getting back on blogging. I think…
I got a lot of new stuff to talk about – most of which revolves around my decision to leave iStreamPlanet after 10 years (and 3 weeks). My experience at iStream was incredible at the very least. From sitting on a milk crate in a tiny room with 2 other guys, trying to build solutions for clients who had no idea what DRM was, much less why they needed it, then 9 years later seeing the company get its first round of multi-million $ funding from Intel Development Corp.
In June I decided to join up with Reality Engineering, a small but stable software and content provider for dental patient education who’d moved their development operations to Las Vegas. The CEO, Lee Allen, is one part visionary, one part realist, one part salesman, and ten parts passion and it’s that passion that grabbed me. It hasn’t been all chocolate and roses, but in just five short months, we’ve managed to put together a fantastic team, get the new, streamlined version of the core product out the door, and get started implementing a scrum environment.
I’ll talk more about it in the next few months. I’m still teaching at UNLV and still doing a few freelance gigs (now that I’m in senior management, I didn’t want my skills to get rusty), but in the same time, Jen’s MadeByGirl and her new Cocoa & Hearts businesses have both taken off like a rocket, so I’ve had to spend a lot of time working on that too.
So obviously my blog has changed. Yea, part of the drive crash left me with a frustrated effort to rebuild both content and template so I decided to scrap all the teaching materials I used to have posted, refocus on the blog, and re-build a new theme. This one is a variation that uses concepts from Shaken Grid Lite but I suspect I’ll change quite a bit more of it over the next few weeks so it’s going to be a “UX-work-in-progress” for a bit.
So I’m back. Yea, I’m back. And I’m not so grumpy anymore.
It’s been a busy season and I’m just starting to catch up on things. Despite having left Art Institute to devote more time to school and teaching at UNLV (why, I’m not sure, but Dean Berghel has been extremely supportive).
Outside of the craziness that is iStreamPlanet with a couple of high profile gigs and a lot of cross-platform and mobile development, I’m focusing on doing more freelance work, particularly in the blog arena and WordPress as site development. With 10 jobs in the hopper right now, should be a good year. The biggest releases recently were Shop Cococozy and Cocoa & Hearts which are both off and running with a bang.
Congrats to the early-bird-exam-takers in my INF400 class who averaged over 90% on the final (last year, the average was below 82%) – nice job! Good luck to those taking it on the 9th.
Continue Reading →
[Original article by Jason Corns is a freelance web developer and full-time GUI developer for Systems Alliance, Inc., specializing in usability for all audiences.]
hough the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled.
You could divide your traffic sources into four broad categories: search engines, mobile visitors, visitors using screen readersand visitors who have JavaScript turned off.
When planning your information architecture and design, you must figure out how to deal with these special groups.
I have assembled a few recent real-world scenarios to find clarity on the issue.
Continue Reading →
Original by Paul Boag (founder of UK design shop Headspace) for Smashing Magazine
Here’s a question for you: would you agree that creating a great user experience should be the primary aim of any Web designer? I know what your answer is… and youʼre wrong!
Okay, I admit that not all of you would have answered yes, but most probably did. Somehow, the majority of Web designers have come to believe that creating a great user experience is an end in itself. I think we are deceiving ourselves and doing a disservice to our clients at the same time.
The truth is that business objectives should trump users’ needs every time. Generating a return on investment is more important for a website than keeping users happy. Sounds horrendous, doesn’t it? Before you flame me in the comments, hear me out.
Continue Reading →
This coming week I begin a series in INF400 Web Security on a group of attack vectors that work hand in hand – XSS, XSRF, hidden manipulation and parameter tampering (then following it up with SQL injection). It’s pretty easy to demonstrate all these but the tough part comes with explaining how the attacker looks at potential vulnerabilities when the student does not have much experience with HTML or Javascript.
Trying to make sure we get through all of the course material I figure I have just about 4 hours to do a fast script review and then demonstrate it. I’ve put together 4 short demos that will hopefully show how the four vectors get exposed, how the attacker finds the vulnerability and then exploits them – a simple forum post, a simple chat, an (online) shopping cart and a social network community wall. What do you think – any ideas on how to approach it the lecture(s) and get the most across?
reblogged from techi.com
Long long ago, in that distant, ancient era of the 2000’s, we heard unending chatter about this thing called ‘the semantic web’.
The semantic web was supposed to be like the holy grail of technology. At its heart, it was meant to do two things: to make all that impersonal data online accessible in regular, everyday language; and to make connections between that data in ways that aren’t always readily apparent.
There were a bunch of promising apps. Two of the biggest were Twine – which has since become evri – and Glue, which is now Getglue.
But now, those two semantic apps are social apps. And in 2011, talk of the semantic web has fizzled. Instead, these days, all the talk is about Facebook and, lately, Quora.
I watched a TV documentary the other day about a professional soccer player. As well as his normal soccer training he mixed in training in other sports like boxing and yoga and I thought this sounded a bit odd. Why would somebody that earns his (considerable) daily bread playing soccer spend time learning and training in areas that are not directly related to his profession?
Well, it turns out that they are related in a round-about way. The athlete and his coaches went on to explain that training in other sports and physical activities, as well as regular soccer training keep certain parts of the brain active and stimulated, and this in turn improves soccer performance and prevents the brain and body slowing down.
This soccer player got me thinking about my own profession in design and made me analyse the way I deal with life as a designer. I mostly design for web these days and that can mean anything from interface design, banner advertising, as well as branding and logo design. It’s easy to drift into the same old routine for each project especially when work is coming in thick and fast — and when projects tend to overlap.
It turned out I wasn’t spending enough time “designing” away from a computer screen and out of the office. When I use the word “designing”, I don’t just mean putting together wireframes and pushing pixels in Photoshop — I mean actually gathering creative thoughts, images, videos and other forms of inspiration whilst living life.
As designers, we have an instinctive desire to collect things, from action figures to postcards to t-shirts and posters — it’s just something we do, right? Taking photos, recording videos, bookmarking web pages, ‘like’-ing and ‘favorite’-ing are all forms of collecting and it’s these things that shape us as designers.
Looking for inspiration can also be treated as a form of cross-training. Taking yourself away from your normal (daily) routine is a useful technique. Since my kids arrived a couple of years ago, we’ve found ourselves watching kids TV and movies as well as reading children’s books. Being exposed to these new forms of entertainment meant seeing a whole new world of animation and illustration and it was fun. Treating yourself to a show or a trip to the cinema to see something you wouldn’t normally watch can also be fun.
Read the entire post on Smashing Magazine
The article goes on to discuss learning new skills such as photography, sketching, and so on, and making sure you have the tools to use – a good DSLR camera (not a point-and-shoot or a smartphone job), sketch pads, a camcorder, a smartphone, etc. I would add one more to this – a PayPal account.
I’ve left teaching at Art Institute for the time being in order to get freelance work and everything else under control while I finish graduate school and decided it’s high time that (yea, yea, I’ve said before) I put more effort into posting articles. While I’m busting my head putting some together, I’ll be reposting some good finds (which is particularly easy at year-end when everyone is posting lists). So here we go…
This is a post from SixRevisions (always a good source) talking about questions you should ask when designing a web site.
We spend a lot of time asking ourselves, our clients and other people questions. Whether it’s choosing the perfect shade of green for our latest web layout or figuring out how to implement a complex typographical solution, the ability to ask the right questions is among the most critical of skills for a web designer. In this article, we’ll go over 60 specific questions that web professionals should ask before taking their website public.
Many professionals work with the aid of checklists, while others routinely check for certain issues as the design evolves. While there isn’t a sure-fire way to avoid the embarrassment of forgetting something post-launch, the habit of continually questioning your work as you develop a website is critical. Sometimes it can be as simple as “Does this work?”; in other cases, more technical questions need to be asked (and answered). (more…)
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.
The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements — even in browsers which don’t officially support them. Just remember to set the correct display mode: block. The following snippet should reference all necessary elements:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
The article goes on to detail HTML5 Shiv, Modernizr, Selectivizr and other great tools that you can use to move into HTML5 and CSS3. Enjoy!
The nature of what we do at iStream frequently calls for systems for internal staff and customers to be able to control content, but not in the traditional sense of things like textual, published data in the sense of a “traditional” CMS such as WordPress or CouchCMS. Instead, our focus is frequently on metadata and media-heavy asset management and event-based structures.
For this reason, my team spends a lot of time architecting, developing and designing custom content management systems. For example, say that you have a customer who needs a system to manage video assets from a conference where there might be multiple playlists comprised of several selected videos, published in multiple formats (ASX, XML, RSS, etc), publishable to unknown or indeterminate media players via syndication and time-manageable. This customer has a very specific need despite the flexibility that the CMS needs to handle.
Frequently developers lose focus of that need – delivering the content – and instead attempt to focus on the flexibility, which in most web shops tends to mean extending the scope into areas that don’t serve the client and increase the turnaround time. What a good project manager needs to bear in mind is that keeping the scope trim, while allowing for future scalability and extensibility, serves your customer and your developer team much better than trying to develop a CMS that does backflips. And it is the PM’s job to sell this to stakeholders. It does not mean that the end result has to be lusterless, devoid of a nice interface or polish. In fact, if anything, trimming the scope to the bare essentials accentuates the need to focus on the details.
I am, to be sure, a bit jaded as my team frequently works on heavily abbreviated schedules – one or two week turnaround times are more often than not the case. So we’ve become accustomed to looking for the streamlined data, reusable components and code, and simplified interfaces. We do back-end a lot with Ajax-to-Web Service exchanges, which is particularly eased with a framework like jQuery. The use of jQuery and the like also provides a step-ladder to support some nice tricks on the front end that give the final result enough polish to make the client smile.
Take for example this system. The client need was born out of the need to publish live event video to a standardized video player. There would be many events and many people using the system so we needed to be sensitive to the amount of data displayed and who was able to see certain things. The video type, because of the RIA player being used, needed to be able to be specified as one of several types, have associated stream metadata, and allow for a number of other content-rich objects such as multiple audio tracks, closed captions, markers, push starts (instruct the player to start at a point other than the first frame during VOD or DVR playback), etc.
The end result is what you see here. There are simply two screens (other than the login) – a dashboard that lists the “events” and an event edit screen. The interface uses a few jQuery UI tools (such as Accordion) to make it sleek and compact, but doesn’t go overboard.
Visual cues and large icons pinpoint missing data or action items, and data is validated on a per-field basis (and of course scrubbed at the SQL point). A single modal popup also provides confirmation of playback in the RIA player before publishing. The authentication system started as a simple “one-user-one-pass” system but was later retro-fitted with a multi-tier system of account-subaccount and admin-and-user privileges system that gives the administrator rights.
I personally use and evangelize using WordPress for a lot of things but for all its greatness, it has also started to become too complex for many people, and I find myself having to spend more and more time instructing clients how to use it rather than focusing on content generation. For MadeByGirl, we ended up producing a custom back-end because it was more specific to our need than packages could provide.
When beginning the process of determining how to manage content, whether it be basic textual content or something else, take the time to consider what will best serve the customer needs. Bigger is not always better, flashy is not always functional. Take care of the need, streamline the design, consider the human-computer interaction aspects and architect a usable system. The ultimate goal is to make the client happy and keep coming back to you (or even better, recommending you).
Courtesy of Shane Snow and Six RevisionsAn awesome and funny infographic, funny because it’s true. For any of my students (including the past ones who may or may not have heeded my advice) … take note and learn a server-side language (ummm, do I hear PHP or Perl or ASP.NET) and databases (SQL in general) and really get into your Javascript. It can make all the difference.
Experience “ū—”: The Last Distraction-Free Writing Environment You’ll Buy. Today.
Original article by Bruce Lawson and Remy Sharp for Smashing Magazine
You can’t escape it. Everyone’s talking about HTML5. it’s perhaps the most hyped technology since people started putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, jQuery expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.
Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today.
Most pages didn’t conform to the simple rules of the language (because their authors were rightly concerned more with the message than the medium), so every browser had to be forgiving with bad code and do its best to work out what its author wanted to display.
In 1999, the W3C decided to discontinue work on HTML and move the world toward XHTML. This was all good, until a few people noticed that the work to upgrade the language to XHTML2 had very little to do with the real Web. Being XML, the spec required a browser to stop rendering if it encountered an error. And because the W3C was writing a new language that was better than simple old HTML, it deprecated elements such as <img> and <a>.
A group of developers at Opera and Mozilla disagreed with this approach and presented a paper to the W3C in 2004 arguing that, “We consider Web Applications to be an important area that has not been adequately served by existing technologies… There is a rising threat of single-vendor solutions addressing this problem before jointly-developed specifications.”
Khoi Vinh (subtraction.com), former Design Director at New York Times, speaking at “FRIETAG am Donnerstag,” a breakfast lecture series in Zurich about his experiences at the position, which he left 2 months ago, and the failures of the industry to see how important the issue of user experience is in this digital age and in thinking that the traditional model of distribution is the problem. The video was put together by Tina Roth Eisenberg (swissmiss.com). Love the quote:
“Great journalism is its own justification! But great journalism is not a substitute for great user experience.”
Continue Reading →
Four obviously talented dudes with much more time on their hands than I can seem to muster have a very slick and ingenious means of performing “radical Web Typography.” For those who don’t already know, typography is one of the new “IT” things right now, particularly since the availability of importing TTF typefaces and now Google Font Directory (and other competing service providers).
In any event, the gist of it is that in order to style individual characters within a single word or phrase, designers were often stuck having to do something like this:
<h1> <span>S</span> <span>o</span> <span>m</span> <span>e</span> <span></span> <span>T</span> <span>i</span> <span>t</span> <span>l</span> <span>e</span> </h1>
Which is a real pain – it’s a lot of code and a lot of thinking just to inject the style. Plus it makes future change very tedious (for example, what if each letter was downsized 1px – what if you change the word or skip one class ordering?).
Lettering Dot JS is a jQuery plugin (fortunately I use jQuery more than most of the other frameworks at this point) which extends a single class across each individual letter, so instead of the code above, you would have:
<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
$(".fancy_title").lettering();
});
</script>
<h1>Cool Title</h1>
Which would result in (output):
<h1> <span>C</span> <span>o</span> <span>o</span> <span>l</span> <span></span> <span>T</span> <span>i</span> <span>t</span> <span>l</span> <span>e</span> </h1>
There are also .word# and .line# classes for word and line wrapping, plus kerning improvements, and reportedly works well with WordPres.
Check out the release page on Dave Rupert’s blog and the Github distro page.
Great job!
PS: And I learned a new term – FOUT: Flash of Unstyled Text. We see it all the time with the new, well styled typography, guess I just never thought anyone would put a term to it. Dave’s post has a good explanation but an even better best practices commentary.
Any student of UX or UCD should know about “the myth of the average user.” There is no such thing – we learn that early on. What we don’t often talk about is some of the things that we share in common. While we spend time worrying about target audiences and their interests, there are still some things we can generalize about most users.
Tonight I delivered a lecture to my Web Concepts class at UNLV – second time delivering the same lecture – but for some reason I was struck by my own words and reminded that we sometimes lose sight of the fundamentals of living life in an age of the Web. The lecture topic was about how users influence Web design in terms of characteristics of modern life. A lot of these ideas were thrown together from a range of UX gurus – Garrett, Krug, Nielsen – but I think this list really says it all.
We don’t read, we scan assimilate
Krug says we scan, meaning we only glance through text content looking for words and colors that jump out at us. Through Nielsen’s eye tracking studies we know that most users don’t fixate on any specific part of a page for very long and that eyes follow similar patterns across web pages, frequently focusing on very selective areas.
In addition, scanning increases speed and efficiency, and it’s frequently influenced by personal choices and behaviors such as selection of monitor size, how large we make browser windows, whether we zoom, do we scroll, and so on. (Scrolling, incidentally, is a topic for a whole other post.)
Modern man…impatience at it’s finest
Modern life, with all its technology, speed, and information has done little to improve our lives other than to inundate us with so muchstuff that we have to do everything fast. I, myself, fall into this category – trying to hold down 4 jobs, school, volunteer work and what little social life that leaves me. So I know that what I get out of it is an huge amount of impatience.
With all this stuff to do, to look at, to deal with, we’ve become an impatient society. Fast food, increased speed limits, convenience stores – it seems like everything our lives are hurtling faster and faster. But with regard to our users, why not use this to our advantage? Let’s take this list of character traits as a starting point:
So what does this mean for user experience? Can we successfully make our sites like a 7-11 store where we can find any suitable product or opinion or data quickly and easily? If so, it would lend itself to meeting the demands of modern man.
Ultimately the goal of many web sites is to make money. Period. A web site is a business, or at least a really small version of one. Unless we’re pushing captive audience live video or we’re Facebook and can keep our users engaged on a single web page for hours, it is unlikely that we can keep eyes on the page for very long.
And a few quandaries
And of course there’s always the quirks of modern life. Once again, a list:
I relate the intuition question to the guy who refuses to ask for directions and would rather drive for hours than swallow his pride. For some reason, even in our own personal space without any repercussion, we tend to continue down the path we think is right rather than double back and refocus. Crazy. The question for an experience designer is…how can we redesign navigation to help guide the user?
Reviews – we all read them, we sometimes believe them, and yet we follow them. And serendipity – well, there is that quirk of life that we actually like to stumble onto things. I myself love StumbleUpon because it’s just friggin’ fun to find crap.
So the question is – what can we do to improve the experience of our web site for the impatient user? Can you, in fact, use this to your advantage? Would love to hear any stories….
Right now, usability and user experience are all the rage, in the same way that Web 2.0 was several years back. I (used to) teach a series on User Centered Design where the focus is on the progression of design and development to create engaging and communicative web sites (re: J.J. Garrett).
But as I continue to get the hundreds of Twitter posts with links to all these articles, it becomes increasingly clear that there is a big difference between USABILITY and USER EXPERIENCE that we seem to gloss over, and maybe even use interchangeably. While ideally they are similar, they are not the same thing.
Usability, in design, describes the ease in which people can employ or use an object to achieve a goal. This means that they get from start to finish with minimal difficulty, using intuition and minimal heuristics. In a narrow context, that might be something akin to completing a purchase on an online store.
User experience, however, describes the emotions and feelings attached to that interaction, including perceptions, affectations, subjective influence and so forth. Some consider usability to be part of user experience, just as information architecture and graphic design might be, but I think that functional aspects of usability, while lending itself to the experience as a whole, don’t drive it, in the same way that our feelings don’t improve the usability of something.
Within the same narrow context of an online purchase, take this example. Suppose we have an online store and we’ve designed every field, every piece of copy, and every interaction to make purchasing fast and with minimal thoughts and actions on the user’s part. However, let’s say the email confirmation doesn’t list an itemization of the purchase so the user is left bewildered. In this case, all the usability in the world didn’t end with a good user experience (necessarily).
I’ve seen and built tons of media (video) players, which all suffer the very same – many have complete usability but terrible user experience, while others are the exact opposite. Visual design is certainly not an excuse for user experience, and definitively not for usability. Visual design should be a means of conveying and improving those aspects.
The point is that in our drive to improve the design and use of our sites, consider that the two are completely worlds apart, even if there are many aspects that are intertwined. When testing, segregate the ideas of usability (in terms of performance of task) and user experience (how did we feel about it) and build both into the test pattern.
It’s a Pantone chip! It’s a credit card! Stop, you’re both right! The color authority is making its iconic color samples available as Visa cards in a range of hues that looks borrowed from the Crayola “bold colors” markers box but is in fact a quintet of shades tapped by Pantone as fashionably hot—or cool, as the case may be—for spring 2011. Shopaholics can opt for blazing Firecracker (Pantone 16-1452), which the company associates not with pyromania but the spicy virtues of “cheerful, dynamic, and tuned in.” That does a pretty good job of describing sassy wunderkind Christian Siriano, who combined deep fiery red and saturated paprika tones with neutral khaki in a spring collection influenced by African, Indian, and Asian culture (think safari shorts, kimono-sleeved jackets, and of course, gowns). Cooler heads and seafaring types can opt for Regatta (Pantone 18-4039)—a cadet blue that showed up in designer Lela Rose‘s spring collection, which was inspired by richly woven Peruvian textiles, and the preptastic 25th anniversary line-up ofTommy Hilfiger. Also trending cool was Carmen Marc Valvo, who dipped into the Blue Curacao (Pantone 15-4825) for a collection designed in part to boost colon cancer awareness, which has made blue its official color. The aquamarine hue, which makes us thirsty for some Bombay Sapphire and Pantone finds “sensuous, tender, and inviting,” also found a fan in young designer Nary Manivong, who looked to his Laotian heritage and the Amish culture he saw growing up in Ohio to whip up pieces such as an ocean-toned corset wrap dress. Meanwhile, a Beeswax (Pantone 14-0941) Visa is bound to stand out in your wallet while subtly signaling to merchants that you’re “warm, sincere, and generous.” Transaction approved! The mustardish shade found a supporter in Tibi’s Amy Smilovic, who mixed graphic blacks and whites with ochre and cool grape (if you fancy a Lavender Visa) for spring 2011. She declares the must-have ensemble “an ochre top with matching ochre pant.”
Reported by Stephanie Murg on MediaBistro