What is a user story?

Stemming from agile software development, user stories are used by the customer to concisely convey what they need in their site or software. In only a sentence or two in the language of the everyday user, a user story describes a solution requirement. While they can be a by product of in-depth requirements gathering process, their use can replace extensive documents on smaller projects.

No really, what is a user story exactly?

While there has been some discussion of how user stories should be structured, we here at Pop Art derived a pattern similar to this one that states:

To <achieve some value>
As a <role>
I want <some feature>.

In this version the value of the story is placed first, and yields a bit more importance than the role or the feature. The object of a user story is to state in simple terms specifically what the product needs to provide, without branching out into how it should be designed, what the user interface should look like or in what language it should be developed.

Recently we wanted to better streamline our QA process here at Pop Art and create a piece of software that would better help us list and track the completion of all the needed tasks to assure we deliver a high quality solution. Some of the user stories written for the development were:

  1. To avoid overlooking common but important tasks on large projects, as an employee, I want a centralized checklist of our collective knowledge.
  2. To identify the amount of remaining checklist items for a given project, as an employee, I want a view of the entire project checklist display the status of each checklist item.
  3. To improve the value of the checklist items over time, as an employee, I want to insert, update or delete checklist items at any time.

These user stories don’t describe how the user clicks here, or on which area of the site they do what. From this document it is actually difficult to tell that the solution is to be a piece of software. The focus is placed on the value needed and the business tasks that need to be achieved.

How are user stories used?

When I worked off-site on a large software project that spanned several months, user stories were written on small 3×5 cards. I suspect the process of arriving at these small nuggets of information was tedious. It took several stakeholders, pouring over gathered requirements from all of the various areas this product would touch – business/marketing, legal – and the various types of end users.

From large amounts of data, they were able to work with a developer/project manager to determine which user stories would be worked in which order throughout this large agile project. Once priority and time-line was established, each user story was then broken out into a series of tasks for various areas, like design, programming, and front-end development. Each of these tasks would span a short two-week period or a “sprint”. This allowed each of us to focus on what we were to accomplish without losing the larger focus of our overall goal. At the end of two weeks, the stakeholders would then test and view pieces of the software assuring that the requirements for that particular story had been met.

What can user stories do for me?

Be it on large or small projects, user stories are used to slice requirements into manageable sections and pieces that can be digested and completed in a quick manner. They are often coupled with a way for the customer to test and validate that the user story requirement has been completed successfully. The key behind this kind of development process is a strong interaction between the stakeholders and the project team. In this way a project can be jump-started and the conversation begun around what the perceived function and value a system or site should embody. Often user stories go through quite a few iterations which communicates a lot of information in a short time, making development time and cost estimation more effective.

I’ve always been asked, “How best do you learn?” And it’s such a tricky question. I’ve gone through times when I can pick up a book and (I’d like to say burn right through it gleaning all of the famously pertinent information, and devouring it from cover to cover!) – actually it’s more like, I devour it rapidly for the first 40 pages. And then my interest peders out, and chances are good, I rarely if ever venture to use what I’ve learned other than the few samples attempted as coded in the book. The other venues for learning – the ones that happen daily – are more of an “I can’t get this shit to work”, variety – and is a sloppy combo of trying something, it not working, and seeing who else has run into it, trying more things, till I invariably learn something and/or fix it, not necessarily both as is sometimes the case with CSS and browser specific issues.

The other times I’ve felt truly engaged in learning has been in class. I’m not talking about the classes I drug myself to as a 20 something undergraduate. There were quite a few of those that had value. That I will never forget. For one the Belgian TA who taught me how to write. And I had always gotten A’s in English – written well – but this woman took the gloves off and truly taught me a lot about writing. None of it evident here, of course. I’m sure she’d thank her lucky stars that I can’t remember her name. But the classes, strangely, that I always loved, were math. In grade school, I moved from New Mexico, which must have been one of the crappier schools in the region to attend Notre Dame catholic school in California. My math skills were abysmal and I had to bust ass just to get up to speed. But it seemed like with the struggle came the fascination. I started spending my time in the math room at lunch. Don’t get me wrong – I could have done other things! I actually CHOSE to be a social parriah. Or so I tell myself. But I enjoyed going into Ms. Williams’ class at lunch. Then Mrs. Anderson’s. And later in my second round of college (post-bachelor’s dalliance with returning for a computer science degree – that I never got!) I found myself in the office hours of my calculus professors.

There was something about being in a group pouring over the problems that didn’t quite make sense, or sharing what you’d figured out – that made the environment – one that some would consider a punishment – fun. Recently, at work, I’ve rediscovered this environment. It’s not quite as fun as the few programming classes I took in college. We don’t do anything that in depth, and it’s not as nerdy as a daily math commune in the lunchroom. But we’ve started, as a group, reading Jquery in Action. Simple sliver of a book. (Note to self, one way to finish a book is to pick smaller ones. Brilliant!) Jam packed with relevant doo-dads. I’m only on Chapter 4. Been doing a chapter a week, which would seem penny-ante. But that’s more than I would have read solo. And I’m actually applying it. Simple stuff like adding classes, adding event listeners, etc. Which I could have done with a simple getElementById, onmouseover etc. But it’s so much simpler. I have to know so much less, to do so much more. It’s really powerful.

So the technical book group is my new best friend as far as learning tools go. I’d really recommend it.

The past few days have been filled with intermittent attempts to focus on “the art course.” It’s been a busy transition from Spring to Summer session. I’ve been working on getting the nav panel on the right to use innerHTML to embed the Quicktime movie (there are over 70 of them) that comprise the professor’s lecture and various slides. As an aside and a bravo to my co-worker, the slides/movies are beautiful. The sound is high quality, and the images brilliant. And you don’t even notice this because the lectures, frankly, are THAT good. I literally intend to take advantage of my position and listen to everyone.

Here’s what this might end up looking like:

Quicktime

How it’s coming together

I say “might” because I will most likely change the image used to link to the iPod Video. I was looking for something that was “standard” but it bothers me that the icon suggests some type of rss feed, or cast. And that’s not what this is. Eventhough I took this from a site that specifically made icons for such a thing. I will most likely make a little mini Icon of an iPod. Assuming that’s legal!

Other than that. It was quite a struggle getting the JavaScript functions to work. Mostly because at first I was trying to make it too difficult. Using the code suggested by Apple that takes parameters and then on a trigger generates the code in the current area that embeds the movie. This would be fine, but I wanted to place the movie in a div other than where the javascript trigger was occurring. And I wanted it to happen without reloading the page. This added to the complexity.

First I tried using onclick of the link in the navpanel on the right and use innerHTML to insert the function into the div to the left. The function would execute passing the parameters and generating the embedded Quicktime object. But JavaScript functions are not executed with innerHTML. So back to it.

I tried looking at rewriting some of the Apple functions, but decided that given none of the parameters for the movies were changing – I could just work on using innerHTML to write the code directly and bypass the functions that account for a myriad of possible parameters. Simple enough. So I’ve got that working. However, thinking that the script was small enough to include in the header of the page, I placed it there. Then realized that it HAD to be in an external .js file thanks to the issue with ActiveX now requiring a user to hit OK to authorize it’s use. So external .js it is. I’m currently experiencing a strange flicker when the movie is loaded in IE. Doesn’t occur in Firefox on PC, nor on the Mac anywhere I can see. I may try to use DOM manipulation to see if that somehow solves the issue.

The other issue I’m having is with the navpanel. I’m using the Rico library and their accordian affect for the drop down menus. However when the browser is being taxed (usually in the playing of a movie) if a user clicks on another header, it moves very slowly. Not sure this is acceptable. It’s not HORRIBLE, but it occasionally annoys me, so am guessing it could have a similar affect on at least a few of the students. I have to try it from home or in the labs. The other issue is manipulating the height of the pane. According to documentation you can pass the variable. I’m having no luck. Tried altering it directly in the library function as well. Will try looking on the forums tomorrow, and if that yields no results may just opt for a different scenario.
I think that’s all the news that’s fit to print!

Well I’m on to the innards. I got a headsup from a co-worker regarding Quicktime’s site and started looking closely at the JavaScript functions they use to generate the code to embed the movies. By generating the code into the page using a function, the text and therefore the filesize should be cut down significantly. Which should eliminate the need to pull an external file using XMLhttpRequest. I should – hopefully – be able to load the parameters for the movie into the page for each movie and when clicked use innerHtml to place the function with variable into the div. We’ll see. It looks like a challenge given the browser doesn’t run scripts when inserting functions via innerHtml. I’m reading up on it. Anything will be easier than writing the JavaScript that uses the DOM to generate the embed tag myself from the text culled from any external text file.

On a more pretty note – I’ve got the layout for the interior pages. Currently this page is pulling announcements from a “dummy” database – an old one from another class just to test the PHP. I’m using the accordion feature from Rico for the navigation panel to spice up the everyday dropdown menu.

Version 1

That is the question. I’m trying to pull together the portfolio portion. I’m debating on using InnerHTML/AJAX to rollover the links and display in the main col1 div the screenshot and code snippet links. And yet I’m not sure if this is overkill. Currently there is just a whole lotta poppin’ up going on. Not my favorite. But for now. The other option, of course, is flash. Tired for today.