And Social Networks are on the way out.

Or at least that’s my prediction for a few years from now.

Still figuring out Illustrator. Made a new wallpaper using the super complex “Copy → Paste” feature in the Adobe Creative Suite. I might write a tutorial on Copy/Pasting eventually, if you’re really lucky.

Download: Cubes (1920×1200)

Just a passing thought on remote research:

I recognize several pros and cons to using remote research. My favorite part about it is to intercept a person about to do [a task], and then watch what they were going to do anyways from their own natural environment. However, I do wonder if remote research practitioners are able to go a step further.

What if we could somehow watch someone do something (they were already going to do), but not have them act any differently due to the knowledge of someone watching their actions. What if there were someway this could be done without invading someone’s privacy, securely, with their permission. There would be no interaction between the moderator(s)/researcher(s) and the person completing the tasks, and the research team would be able to see when the user is using the site, versus when they switch to another application, pause from the task to go do something in another browser tab, or do anything else that the user does naturally.

There are certainly a lot of what-if’s there, and I do think that the current remote research methods are very valuable, but I think that this type of ideal approach offers a lot of benefits. I sometimes take notice to strange things I’ll do when filling out a form, or sending a payment that I never get to watch other people do. For example, while subscribing to a service this morning, I paused in the middle of the signup process to go chat with a friend, then did some browsing on another site, and then I remembered that I hadn’t finished signing up for that site. Maybe that’s a pretty rare occurrence, but it definitely seems like something I could test for. Maybe it was actually just a bad sign up process, and where I paused ends up being an area where some people drop off.

*shrug*

Just a thought

I’m a big fan of wireframes. Prototypes too. Actually, especially prototypes (even though I almost always start with a blocked out wireframe).

But almost equally important to me is a means to discuss these initial designs with my team/stakeholders/project-managers. Over the past few months, I’ve worked a bit on refining some processes for having these important conversations. This morning on the UX Booth, I published a quick post outlining some of the tools I’ve found especially useful in starting these discussions.

Check it out: Tools for Facilitating Feedback on Wireframes and Prototypes →

This year marks the beginning of my efforts to work with clients as a designer, consultant, and user experience researcher. It’s a personal mission of mine to commit the next 3 years to building my skillset in an area where I otherwise have very little experience, client services. Not only that, but I’m interested in seeing how well I can do for myself outside of my usual comfort zone. How much can I learn, and how can I maximize/spread out my income streams?

It hasn’t been a major problem yet, but a lack of a solid portfolio definitely hasn’t helped out. I partnered earlier this year with The Phuse, and I am now working with AvailableUX which has sort of allowed me to be an independent contractor without proving to clients that I’m capable of certain tasks. I do think that a portfolio will eventually be useful in filling any remaining hours I can’t otherwise book.

That eventual portfolio might come at a later date, but for the time being, I’ve created a very brief online portfolio. It currently features two of my favorite projects, The UX Booth, and Tut9.

Sad day. Turns out that the Justin.tv Javascript API doesn’t work for Android devices. Maybe their Live Video SWF aPI works with Android, but Flash is the culprit and reason I wanted to work with the API in the first place. It would be really awesome if JTV had more choices for how you use their API—including a non-flash based way to stream video so developers could design applications for most new mobile devices.

This isn’t a complaint; I think services like JTV opening up their platform for developers will lead to some great things in the next few years. I’ll bet that the first big player to build out a strong platform that is cross-device compatible is going to explode in popularity.

Anyways, I didn’t get past just building a simple test, so not much time wasted here. I’m not happy with the controls on the flash player for Justin TV when watching on my Motorola Xoom, and wanted to build a more reliable interface for myself and other Android users. The flash controls are clunky, slow to respond, and I can never seem to hit the right button (often times stopping my video, and forcing me to redirect to a justin.tv channel page when I’m watching from a pop-out or embed).

I’m sort of a beginner when it comes to building out these sorts of things, and there weren’t any good examples for getting a basic stream running in JTV’s docs. If you’re new to this sort of stuff, here’s the code I used to build out a basic player:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JTV for Android</title>
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css">
<link href="stylesheets/common.css" rel="stylesheet" type="text/css">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www-cdn.justin.tv/javascripts/jtv_api.js"></script>
<script src="javascripts/app.js"></script>
</head>
 
<body>
<div id="player"></div>
</body>
</html>

Javascript (app.js):

$(document).ready(function() {
 
	var gid = document.getElementById;
 
	var options = {
		channel:'theleggett',
		consumer_key:'e6ql03EOgx31mZgQfopQ',
		auto_play:true,
		custom:true,
		width:480,
		height:360
	};
 
	var player = jtv_api.new_player('player', options);
 
});

Web App Tester is an easy way to test web-based applications at 320x480px. This project was designed to work in Webkit browsers, and uses a customizable iframe to mimic the browsing experience on devices like the iPhone.

This project was designed to be used primarily on tablets, where the touch experience is most similar to touch-enabled phones. Currently, the iPad is not supported. This likely will not change unless iframe/object elements get better support on the iPad. More details below.

Web App Tester, will also work on Desktop Webkit browsers.

Tested Devices:

• Motorola Xoom: No known issues.
• iPad 2: No support. iframe bug.
• Windows 7, Google Chrome: No known issues.
• Windows 7, Safari: No known issues.
• Mac OS X, Safari: No known issues.

Open to feedback and thoughts on how this browser could be improved. I’ll do my best to maintain it and fix any problems.

iPad Bug

I’m really frustrated about not being able to make this work for iPad devices. One of the goals of making this public was allowing iPad owners to quickly test iPhone web apps via their iPad. Unfortunately, the iPad does not work well with iframes.

The iPad doesn’t respect overflow rules with iframes, and will instead render out the entire width/height of a document in an iframe. Additionally, content inside of an iframe cannot be scrolled. I’d classify this as a bug with the iPad, but this is definitely a device I’m interested in supporting.

If you know of a possible solution to making this work on the iPad, I would greatly appreciate your help. You can download the full source of the current iteration here for modifying.

Updates/Changelog

May 12th, 2011

• First iteration released.
• Needs back button.
• Needs refresh button.
• iPad won’t scroll with overflow fix applied.
• iPad doesn’t support iframe overflow instructions. Fixed.

May 6th, 2012

• Layout updated to maximize space.
• Can toggle between iPhone and iPad views.

Thank Yous / Additional Support

• Andrew Maier for iPad testing.
• Jason Gullickson for discussing the idea with me, and his work on DashApp.

Update: Decided to build this out a bit more, so the demo below no longer reflects the original code. Be sure to check out the full Web App Tester Tool.

So, feeling a bit silly today after asking if there were any good iPhone simulators for the iPad last night. As I do more mobile web app development, it’s becoming more of a necessity to own the devices I want to test on. If I had a simulator for smaller devices on a tablet though, I’d be all set. The frugal spender inside of me likes that idea.

After discussing some ideas with Jason Gullickson, I realized that I had completely forgotten about iframes, and how they work well with media queries. Oops.

A few short lines of code later, I have a working simulator for 320x480px devices that changes from landscape to portrait mode automatically. It’s super basic right now, and I’d like to add some customization features (additional device sizes, URL entry, device back button), but this is a good starting point for testing. When running on a tablet, it should do an ok job of mimicking a handheld touch device like the iPhone.

It works for really simple testing on a desktop as well, sans-touch.

Download Web App Tester: Web App Tester (49KB, .zip)

Try Web App Tester (Hint: Resize your browser viewport to get portrait/landscape mode.)

Currently, the demo above will just load up jQuery mobile’s documentation in the browser. If you download the system, you can plug anything in the iframe src. I’d like to build out this system a bit more, and offer an online toolkit for testing sites on a variety of devices eventually. I’ll post an update when that’s available. Until then, you’re welcome to use/modify/whatever any of the code in the download above.

One last thing! I built this for Webkit browsers, so it will have problems running in IE, Mozilla, etc as it is.

The previous navigation system we prototyped fell short for a few reasons. While the idea of making so many choices readily available on every page seemed great, it actually was just bothersome when being used. There wasn’t enough of a cue when a new page was loaded—nearly half of the device screen was always identical (or near identical anyways).

I still think I want a good balance of “backwards” functionality, and easy access to some sort of global navigation system.

Thinking points:

• A literal “Back” button in the navigation seems like a bad idea. I’m assuming people understand their devices back button functionality similar to how they use the back button in a desktop browser.
• I want a “Home” button on pretty much every page. Seems even more important in mobile design that people have a way to ground themselves and reorient their location on a site.
• When visiting a page in a sub-section of the site, I want a button to quickly go to the root of that sub-section. IE: If I’m visiting a discussion thread of a forum, I want to quickly be able to travel to the default Forums view.
• Links in this header area have to really look like links or buttons.
• Trying a dropdown navigation that allows for quick traversing across the entire site (similar to our earlier idea). Less useful because you don’t see all the options without actually clicking it. More useful because it doesn’t take up nearly half a page, and still makes for quick navigation.

Will have to wait and see how right or wrong I am about any of these assumptions.

Adobe is helping bring CSS Regions to Webkit-based browsers with their latest proposed additions to the W3C CSS modules. They’ve also released a brief demo that extends the Webkit to show some basic implementations of CSS Regions and Exclusions.

Some highlights:

• Text can take the shape of polygons drawn in CSS.
• Text can flow in assigned order from one element to another (similar to the ‘flex-order’ property of ‘display: box’ items, but of course not constrained to the flexible box model).
• Text can avoid drawn polygons in CSS.