User Experience is a class I was really excited about when the semester began. And I think that enthusiasm is what made me realize how much I actually love this kind of stuff. Tailoring design to suit the needs of real people is something I’ve always been intrigued by, and I feel very fortunate to have learned so much about it.
Research was really the main thing covered in this class. The big lesson I took away from it was understanding. Not just regurgitating quantitative information, but applying it on a qualitative and conceptual level. Understanding is the key to creating good work. And that applies to any subject. It’s not just design. It’s life.
I feel like I’ve unlocked some of the secrets of design; like I’ve been given some exclusive tools for being amazing. I’m part of an elite club of designers who take actual people into consideration, and not just “getting the job done.”
User Experience has actually made me re-think my future as a designer. I came into this program with the idea that I’d end up working in for a small, local company, doing glorified desktop publishing for random clients. But now, my standards have changed, and I’m starting to take a real interest in catering to niche markets and subcultures. These unique groups of people need someone to speak for them and to them, and I want to become that someone.
I’ve decided that information architecture is yet another direction I could possibly take in my life (and definitely enjoy!). I love the idea of building usable information out of raw data and content. Sculpting something practical out of something mundane is like magic. The geek in me loves to create order and hierarchy, and I love making it accessible and digestible too.
Between UX and IA, I think I’ve developed quite a design arsenal this semester. I’m getting dangerous.
Typography 4 taught me how to manage a project on my own. This was my first real self-directed class, and I learned more about myself than I did about typography. I think typography was just a medium for that. The experimentation process also taught me about how a project can evolve dramatically over time and become something really refined and engaging. And it taught me to keep pushing things, even when I think I’ve pushed enough. There’s always more to do, and there’s always something better to achieve.
This semester has been the most nurturing, inspiring, and stimulating semester I’ve ever had. I’ve learned more about myself and who I want to be in these three classes than I have in my entire college career.
I’ve reached some milestones in the past couple of weeks:
Auto-reload works! And it even fixes itself when the network connection bugs out! (I used a heavily modified chunk of code from WPMayor.com, in case you were curious.)
All of these things have resulted in a smaller main page, so loading time is a bit better now too.
An error message now comes up when there isn’t a response from Twitter.com, instead of a blank page. It explains why the tweets aren’t loading, and tells the user not to get trigger-happy with the refresh button (because there’s a limit to how many times they can refresh every hour). This message automatically goes away and is replaced by the type animation when the connection is restored.
Automatic reloading is now limited to 120 times an hour (to comply with Twitter’s request limit, while still allowing the user to hit the refresh button up to 30 times if they get anxious). Unless they go nuts and hit the refresh button more than that, it should automatically reload every 30 seconds with no problem.
I’ve spent some time refining every aspect of my Twitter experiment.
I’ve refined the aesthetics and readability by increasing the contrast between the background and the tweets. I’ve added a subtle drop shadow to the “inactive” and “flyout” words, while the “impressions” now have an embossed effect.
One of the more recent tweets has more keywords, and therefore has more flyouts. This caused some legibility issues because the flyouts were pretty opaque. Once the flying keywords get close enough to the user, they tend to block everything behind them. Kind of a problem if you want to actually read something.
…So I made the keywords become more transluscent when they get closer to the user. This not only helps with usability, but it also gives emphasis to one keyword at a time, to help with hierarchy and provide some rhythm and structure.
In the way of technical things, I came across a problem where multiple-word phrases (like “that’s what she said” and “ellen lupton”) were breaking to multiple lines when they flew in closer. I fixed that, so now those phrases are staying on one line while they’re moving around.
I’m working on getting the tweets (not the whole page!) to auto-refresh when there’s a new tweet. I know this involves my page saying hello to Twitter’s XML file to see if there’s something new, and then refreshing if that’s indeed the case. I just don’t quite know how to do that yet. But I’m working on it. I tried to get a crude reload button (I know, I know. Not automatic.) working yesterday, but this happened:
I’ve learned that this is because of the same-origin policy. But I’m pretty confident that I can find a workaround somewhere and apply that to my page. So that will hopefully be resolved very soon.
I plan to continue the ongoing process of adding/formatting keywords to my CSS/PHP files. (For example, Ellen Lupton wasn’t even a keyword until this past weekend, and I made her glittery because she’s awesome and we love her.) My method of adding keywords just sort of happens when I spot a word that I’ve seen a few times before. Nothing too “designery,” but I do what I can.
I will try to fix the same-origin policy thing. I need those tweets to reload.
So that’s where I stand right now. I’m gonna keep on moving forward, and awesomeness will ensue.
The glittery “love” text is actually animated! The glitter sparkles! Hooray! I’m pretty excited about what CSS3 can do. At the moment, I’m still working on keyword styles. I’ll be tackling full-on tweet animations soon.
Here’s all of the sources I’ve used to get some basic code for all the stuff I’m doing. I haven’t used any of this code verbatim, because what I’m doing is very specific. But I’ve managed to make it all work together, which I think is pretty darn cool.
So, I’ve abandoned Flash and ActionScript for something more versatile. HTML5, PHP, jQuery, and CSS3.
Since I’m not terribly comfortable with any of these things, it’s pretty perfect as a learning experience. And as an experiment, I have no real expectations of how it “should” end up, because I have no real grasp on what I can do with it yet. As far as I know, anything is possible and anything can happen. So that’s what I’m shooting for. Endless possibilities.
I’m also totally open to future applications of this technology. What if I project this onto a large touch-responsive surface? What if there’s an element of augmented reality? What about a mobile app? Everything’s wide open. And incredibly exciting.
As far as actual production goes, the hardest part these past couple of days has been making an RSS feed’s output work with keyword highlighting. I followed many differing tutorials, pulled things from each of them, and modified them to the best of my ability, and I finally got it to work on a basic level last night. I have the feed working, and keyword highlighting is working for the most part (partial or compound words like sleep vs asleep are still causing me some technical problems, but I’m sure I can get that figured out in the next week).
The hard part will be animating everything. That’s where jQuery comes in. I have never touched the stuff before. So this is an adventure for me. I have no clue what I’m doing, and it’s pretty liberating to have that kind of uncertainty and freedom. I know that I want tweets to move depending on their keywords, so that’s a place to start for now.