Handguns and Tequila: interface

Showing posts with label interface. Show all posts

Monday, February 23, 2009

Peek-a-Boo Divs

I was just messing around with some HTML/CSS/Javascript stuff the other day, and came up with something kind of awesome. It's a div that hides until it has the mouse placed over it, and then hides again when the mouse leaves. It's very similar to a hiding toolbar, and could be very useful if applied correctly.

Due to its ability to be present, although mainly unseen, it would be particularly useful for web pages/applications that require large amounts of content on screen, so that more wouldn't have to be devoted to the standard menu.

I've tested this in IE7, Firefox, Chrome, and Opera. It works no matter the resolution, though I have yet to try it on my G1 (for the size tests, I basically just scrunched firefox and IE down very small). It's W3C compliant (except for the colors, which I don't really care about) for both the html and the CSS. The HTML uses the XHTML 1.0 strict dtd, and there isn't a single table anywhere. This is how I roll.

HTML:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Bar Test</title>
<link rel="stylesheet" href="./menubar.css" />
<script type="text/javascript" src="./menubar.js"></script>
</head>
<body onload='pageLoaded()'>

<div id="fullmenubar" class="menubar" onmouseover="overCollapsedMenu()" onmouseout="leftFullMenu()">
<h1>Menu</h1>
<p>
<a href="index.html">Home</a>
<a href="index.html">Projects</a>
<a href="index.html">Contact Info</a>
</p>
</div>
<div id="content">
<p>This is where the content goes!</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nibh nisi, dapibus vel, elementum eget, vehicula vel, lorem. Donec ipsum est, tincidunt iaculis, nonummy ut, dictum vel, velit. In leo magna, aliquam et, suscipit sed, cursus in, tellus. Suspendisse dui felis, convallis vel, porttitor pellentesque, dapibus vitae, neque. Suspendisse potenti. Sed erat orci, rhoncus at, tempor in, pellentesque vel, tortor. Nam urna. Sed bibendum. Aenean ultrices vehicula lacus. Duis ac arcu. Nulla facilisi. Sed pulvinar risus eget leo. Praesent pulvinar varius ante. Cras lorem nibh, elementum nec, accumsan nec, imperdiet et, felis. Fusce gravida sem et orci. Suspendisse lectus nibh, tempus eget, sagittis sit amet, pretium vel, dui. </p>
<!--There was more Lorem Ipsum, but I dropped it for readability's sake.--%gt;
</div>

<div id="footer">
<p>Here is the footer!</p>
</div>
</body>
</html>

CSS:

*{ /*I know this is bad, but hey, it's a test document.*/
padding: 0px;
margin: 0px;
border: 0px;
}

.floatedlabel{
float:left;
}

.menubar{
background-color: green;
border-left: 5px yellow solid;
border-right: 5px yellow solid;
border-bottom: 5px yellow solid;
color: white;
left: 10%;
position: fixed;
right: 10%;
text-align: center;
top: 0px;
width: 80%;
z-index: 9001;
}

body{
background: lightblue;
padding-top: 5%;
}

h1{
float: left;
}

#content{
background-color: lightgreen;
border: 2px yellow solid;
left: 5%;
position: relative;
width: 90%;
}

#footer{
background-color: lightgreen;
border-left: 2px yellow solid;
border-right: 2px yellow solid;
border-top: 2px yellow solid;
left: 15%;
position: relative;
text-align: center;
top: 5px;
width: 70%;
}

Javascript:

function pageLoaded()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}

function overCollapsedMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "visible";
fullmenu.style.top = "0px";
fullmenu.style.height = "";
}

function leftFullMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}

Oh, sorry, did you want that menu to be at the bottom, maybe for some Mac OS X dock-style menu? Well, in that case, for the menubar, change

top: 0px;

bottom: 0px;

and in the javascript replace all instances of "top" with "bottom". Enjoy.

Wednesday, October 22, 2008

Lock's Quest Recap

This is sort of a game review, but also a discussion about interface design, and the nature of fun in games. I recently purchased Lock's Quest, which was the best Strategy game at E3, which for a DS title, is pretty impressive. It's developers also put out Drawn to Life, a game that I wanted, but never got around to purchasing. Basically, you're a special boy in a war...blah blah blah, the story isn't really that important, but the game itself is really involving.

You have so build walls and turrets to fend off increasingly large and tough armies of clockwork robots. That in and of itself sold me, but the DS's touchscreen is really well implemented in both combat and repairing damaged structures. Depending on what you're trying to do, there's an associated task (pulling a lever, spinning a gear, etc) that makes the action you're attempting go faster, or more effective. While this sounds kind of hackneyed and repetitive, they're mixed up nicely, and you don't just sit around for 10 minutes doing the same thing over and over again.

I'm also really impressed with how they set the flow of the game up. After a few rounds with your defenses, you have an impenetrable death-fortress, and you're able to handle even the most vicious onslaughts. Then, the game tells you that you have to go grab an objective all the way on the other side of the map. It's frustrating, yes, but it breaks the whole build-repair-fight cycle, which is nice. It's also worth noting that there's few things more awesome than watching wave after waves of bad guys crash on the rocky cliffs of your defenses.

One thing is infuriating though. The screen doesn't zoom out, and there's a fixed speed to the camera, so panning from one wall to another can sometimes take precious seconds. This in and of itself is not too bad, since (if you're like me) you can set up relatively smaller, close defenses. However, when you pan to a location, and then tap (which tells your character to move there), the AI that keeps the main character from running aimlessly into a tree is a little bit lacking. So far, I have lost a solid number of turrets, and even a level or two, just because there was a rock or tree or bit of something in the way, and the flax-haired hero did nothing except struggle against the properties of matter until I realized and gave him an easier location to get to (after a while, you get used to tapping out smaller, shorter paths).

With that behind me, I do have a few more good things to say about this game. Despite the "ehh" story, the game has a good length to it. I thoroughly enjoy the game mechanics that are in place, and was worried that with all the cool stuff in it, that the levels would be cut tragically short, leaving me wanting more, much like when you when you visit home, and only get a single strip of bacon, because that's "healthier." Don't worry, this game has platters of bacon. I've been playing it for about two solid weeks now, mostly during my commute and at home and I think I'm only 2/3 of the way through it.

Also, the difficulty is really well done. While I didn't like that there wasn't a standard dial-a-difficulty, which would be pretty easy to do with this game, I was able to clear most of the levels on the first try, though a good number of those were nail-biters, and a couple of them required a do-over. The increases in challenge over time are well-paced. I never felt too bored, and when I was right on the edge, something new popped up. Also, there's a fun little seige mini-game which would be right at home as a flash game.

Monday, February 25, 2008

Playlist Loading/Shuffling

Sorry it's been so long since my last post. I took a trip up to New York for an OpenSocial Hackathon (which I'll discuss in a later post,) but I just had this thought mulling around my head and felt like writing it down.

I probably use my media player (WMP, Songbird, AmaroK, etc) more than any other program on my computer. No matter what I'm doing (coding, web-surfing, doc writing, or all three,) I'm usually listening to music. I'll pick a playlist, either from my list of pre-made playlists, or just throw one together at the drop of a hat. However, I really hate how most modern shuffles absolutely fail at "shuffling" my songs. On my n800, GP2X, and ipod before that, I could tell that there was no list order, but that the player literally just selected a random song from the list, and played it. Yeah, it's fast, but it's lazy, and kind of infuriating. A few days ago, on WMP, it actually played the same song twice. As far as randomness goes, that's technically random, but I don't like random, I want shuffled.

When you're playing a card game, you don't reshuffle the deck every time someone puts a card down (though that could really screw up your magician friend's magic trick.) No, you wait until the deck has been fully uncovered (or the hand ends.)

Along with that, even though WMP loads a playlist, it "shuffles" it, but it's pretty lazy as well. That's why when the playlist ends, I coudl theoretically listen to the same song twice. Even along with that, though, sometimes it'll get into blocks where I hear all of an artist's songs right in a row, which is frustrating as well.

I don't have any code at the moment, but it would really be nice if there was a good shuffling algorithm that made sure that artists' songs were kept spread out, prevented playing the same song close to itself, and, in general, made my most commonly performed task a little bit nicer.

Wednesday, January 23, 2008

I Hate Scrollbars

I have a big post I'm working on about the Microsoft Sync Framework, but I'm working on some UI mockups right now, and realized that I have something to rant about.

In general, I HATE scrollbars. I hate including them in my UI designs, because in my mind, they represent a failure to display all the necessary information in a neat, compact manner. Don't get me wrong, in many instances, they're perfectly acceptable, but with what I'm working on (rich interet applications,) if your user has to scroll, and it's not because of their content (and sometimes even if it is,) you've probably messed up somewhere. The extra effort a user has to exert by scrolling better be worth it, and in many cases, it isn't.

Prime example: Blogger. My browser is fullscreened, on a monitor with a resolution of 1280x1024. There's tons of whitespace to the right of and below the edit window. However, by the time I finish this line (* right there, actually,) I have not only a vertical scrollbar, but a horizontal one. Google has all sorts of Javascripty-Ajaxified coolness on this page. Why can't they resize the editing iframe? Or wrap properly.

Part of it is the inability of developers to come up with interesting ways to display information. That inability is partially from the fear that users will reject what is new and strange. That's bull. When I first started using Office 2007, for about the first week I had a hard time adjusting to the "Ribbon" UI. Nowadays, I can do what I need to a lot faster, and Office 2003 does nothing but remind me that sometimes Microsoft products DO get better with newer versions. Good UI will keep it's users, even if it's initially a little bit different.

That's the end of my first real rant, I'm sure there'll be more to come.

Tuesday, January 8, 2008

What I Learned About User Experience Over Winter Break

I know I've been bad. The holidays, projects I shouldn't be blogging about, and my shiny new Xbox 360 have been the major contributors to falling off my "one post a week" horse. Either way, I should be back on said horse, and riding back into the Wild Blogtier. Let's start rustling.

Since I'm still (technically) a student, many of my fond memories are from my younger years, where homework that took 1/2 an hour was epicly long, girls were icky, and corn dog night was just about equivalent with Christmas or losing a tooth. One of the other things I recalled was the ever-popular "What I Did On My ___ Vacation" essays. In my quest to find shiny things for my girlfriend's Christmas present, I learned a valuable lesson...about user experience.

I live in Philadelphia, and there's a section of Eighth Street called "Jeweler's Row." That section (if you haven't guessed already) has lots and lots of jewelers on it. It's the logical destination for any hapless (see: male) potential jewelry buyer, since you can find pretty much anything you want there.

I looked into a couple of the smaller ones, since I try to support local businesses over large chains, but they all looked pretty shady. If I'm spending a significant amount of my cash on something that does nothing but look pretty, I tend to want to know I'm not being taken for a ride. So I went to a large chain store.

The salesman was attentive and friendly, and even offered me a cup of coffee when I came in. I told him what I wanted, and what my budget was, and he told me that what I wanted (garnets) were not in high supply (which was odd, considering that they're January's birthstone) so he could get some for me, and set them himself. That seemed fine to me, so I agreed to call a few days later to check on the progess.

I call, he's sick, call back on Monday.

I call again, still sick call on Tuesday.

I call again, he's still sick, call on Wednesday. It's the 18th, and I'm leaving on Friday to visit family. I ask if I can get anyone to help me. They say no, because it was his sale. I tell them to tell him not to bother, because I'm going somewhere else.

I try another large chain, but apparently they only had diamonds. So much for that.

Finally, at my wits' end, I try one of the hole-in-the-walls that was suggested to me by the salesperson ad the diamonds-only place. Lo and behold, I walk in there, tell them what I want, what I want to pay, and they say "okay, we'll have it for you on Thursday."

The lessons that I learned here go something like this:

1) Jerk the consumer around (even non-purposefully,) and they'll leave you.
2) If a customer's only contact is unavailable, and you won't provide another, you'll lose them.
3) If you can't provide what your customer wants, point them in a direction they can use. Then, they might come back to you when they need what you do provide.
4) Appearances are nice and all, but in the end, what matters is if you can deliver the goods or not.

And that is why I think the T-Rex was the coolest dinosaur ever.

Handguns and Tequila