StoryStarter: Exporting your photos and text to the web
John Prebula {johnpreb@hotmail.com}
Dept of Computer Science, University of Maryland College Park, MD 20742
Web site: www.cs.umd.edu/hcil/photolib
May 25, 2001
Introduction
The Internet has revolutionized the way people are able to communicate with each other.
People can send electronic email, have real time conversations, share pictures, stories,
and ideas with anyone in the world free of charge. Keeping in touch with family and
friends has never been easier. Sharing digital pictures has become very popular through
the Internet. With the increasing availability and affordability of equipment such as
scanners and digital cameras, sharing pictures with family and friends is no longer limited
to the annual holiday card.
However, sharing pictures is only the first step in using digital pictures to communicate.
Consider a typical situation of looking through someone else’s photo album. If the
person that put the album together is not guiding you through the pictures, you are not
getting the story behind the pictures. Snapshots taken during the family vacation usually
do not tell much of a story by themselves. There needs to be someone there to tell the
story behind the pictures. This is a shortcoming of most of the software currently
available that allows users to publish their pictures to the web. The software allows users
to post their pictures but does not allow them to tell a story using their pictures.
Evaluations
There are many software applications available that allow users to edit and manage their
digital photos. Three were evaluated for this paper, Canon Photo, MGI Photosuite, and
Microsoft Picture It!. The features available in each of these applications are fairly
standard, however some of the applications are much more user-friendly than others.
MGI Photo Suite was the best application of the three evaluated in terms of features and
usability. See Appendix B for the complete evaluations of these software packages.
Only one of the applications evaluated allowed users to tell a story using their pictures.
The web publishing features in these applications typically included three types of pages.
The first is a single picture on a page where the user could choose from several
backgrounds, and provide a few textual elements such as a title and caption. The second
is a slide show, where the user specifies a group of photos to include and a title. The
viewer of the web page clicks on forward and back buttons to cycle through the photos.
In all but one of the applications, the web page itself never changes, only the photo is
changed, making explanations of each photo is impossible. The designer of the page can
only provide a title and enough text to describe the collection as a whole. The only
application that provides users with a tool to tell a story using their pictures is Microsoft
Picture It!. It generates a separate page for each picture in the show and can therefore
show different text for each photo. Unfortunately, limitations in the application itself
hinder the success of the Web Slide Show as a tool for creating stories.
The third type of web output is much like the collection viewer web pages that are
already a part of PhotoFinder. For these pages, the designer chooses a group of photos
and includes a title and some text. The page produced has two sections; one index
section which includes thumbnails of each of the photos in the collection, and a large
viewing section where the full size photo is displayed after the thumbnail is clicked on.
These outputs are fine for sharing pictures with an audience, but they do not allow a story
to be told.
There are also several web sites that allow users to share their digital pictures online.
Three photo web sites were evaluated for this paper as well; they are Kodak’s PhotoNet
at http://kodak.photonet.com, Intel’s GatherRound at www.gatherround.com, and AOL’s
You’ve Got Pictures at www.aol.com. The services provided by each of these sites are
remarkably similar.
All three sites require that users sign up and create accounts. The accounts are free,
except at AOL where the service is part of the standard AOL Internet Service Provider
membership. The sites allow users to upload pictures and organize them into different
photo albums. The albums typically involve a collection viewer like layout. There is a
thumbnail representation of the photos and a central viewing area for the larger image to
be displayed. The Kodak site is tied to their photo developing labs so users can choose to
have their photos uploaded to the web by the lab.
Once the pictures are on any of these sites, they can be sent as email or Internet post
cards. The owner of the account can also notify family and friends when a new album
has been created, and they can view the album by logging on to the web site. The
viewers of the site can also order prints of the photos from the Kodak site and
GatherRound. This allows family and friends to look through the albums and order the
pictures they really like. While these sites are a great way to share snapshots with any
audience, they do not let users tell a story with their pictures.
Description of Problem
Many people use their digital pictures to illustrate a story about a particular event. Web
pages are an excellent way to share stories with family members, friends, or any diverse
audience. A great example of this is Dr. Ben Bederson’s personal web page where he has
published a story detailing his trip to Russia to adopt his daughter
(http://www.bederson.org/dana/kazakhstan/timeline.html). The format of the page is
fairly simple, blocks of text broken up by the pictures from the trip. This format is very
effective for Dr. Bederson as he is able to detail his adventure from beginning to end with
text and pictures from the trip. It is much more effective than a simple text story as his
audience can read about and see photos that illustrate a particular situation. It is also
more effective than a simple web page containing the collection of photos from his trip
because the pictures would not tell the whole story. Using text and pictures he is able to
tell his audience about his feelings as he and his wife are on a terribly long flight, anxious
to finally meet their new daughter; the emotional ups and downs as they have to deal with
various foreign officials who slow down their progress; and finally the joy of meeting
their new daughter and getting on the plane to bring her home. While professional
photographers might be able to capture the mood and emotions of a given situation with
just a photograph, it is unlikely that typical snapshots would do many of these situations
justice. But using the pictures from the trip to illustrate a written story allows Dr.
Bederson to effectively share his story.
Dr. Bederson could have made this story with only one of the applications evaluated in
this paper. Only Picture It! allows the page designer to add text to each of the pictures in
a collection. The rest do not even allow a collection to be displayed on more than one
page. Users cannot even use a standard HTML editor to go back and edit the pages
produced by the other applications to write a story. The pages are designed to simply
share digital pictures, not stories. This is a severe limitation to people who want share
their experiences with more than just photographs. This limitation is what the
StoryStarter component of PhotoFinder is designed to circumvent.
Brief Background of PhotoFinder
PhotoFinder is a powerful tool for organizing digital pictures on a PC. Photos can be
organized into general categories called Libraries and further sorted into Collections.
Details about the Libraries and Collections including descriptions, keywords, date,
locations, etc. can be stored in PhotoFinder so that photos can be easily found. Specific
data for each photo is also stored in PhotoFinder. The people in each photo can be
annotated with drag and drop labels, which can be used to find all of the pictures with a
specific person in them. PhotoFinder is a very effective means of storing and organizing
digital pictures. PhotoFinder currently has a web-publishing feature. However, it is
simply a collection viewer that allows users to share a collection of photos via a web
page. It does not allow a story to be told using the photos.
StoryStarter
The StoryStarter addition to Photo Finder is designed to allow users to output their
pictures in a fairly customizable format to a number of web pages. Information about the
collection and each photograph can be included in the web pages or it can be left out. The
pages themselves are fairly simple as a full-featured HTML editor is beyond the scope of
the PhotoFinder application. StoryStarter simply produces a title page containing the
representative photo for the given collection and all of the photos in the collection. The
user can customize how many photos are shown on a given page and what information to
include about the photo. Any of the information stored in PhotoFinder about a photo,
including captions, descriptions, locations, dates, people in the photo, rating, etc. can be
output to the web pages. The format of the pages is deliberately simple as StoryStarter
was designed to be a starting point for the publication of stories on the web. The pages
produced can be easily modified and updated using any HTML editor. Even people who
do not know how to write HTML can use an application like Microsoft Word to view and
edit the pages.
Figure 1. Choose Story Location
Before the StoryStarter component is launched, users are asked to choose a directory
where they want to publish their web pages. The directory they choose will actually
serve as the parent directory to the directory where StoryStarter eventually publishes their
web pages. Figure 1 shows the form dlgStoryDirectory.frm which is called before the
StoryStarter form is shown. In this example the user has chosen to publish the web pages
to the “D:\Research\PFK\PhotoFinder3\Pub” directory. When the pages are actually
published they will be placed in their own directory named using the name of the
Collection inside the Pub folder chosen.
Figure 2. StoryStarter Step 1
The StoryStarter component has a very simple user interface shown in Figure 2. The
form caption tells users they have opened the StoryStarter tool and are on the first step of
the process. The form itself is broken up into three major categories: Story Options,
Picture Options, and Caption Options. These major categories allow the user to specify
what information to include about the collection, the size of each picture in the web
pages, and the information to include in the caption for each picture. The default settings
of the controls are shown in Figure 2. The defaults have been chosen as a reasonable
expectation of what users will want to include in their web stories. Should they change
the default values the system will make their changes the default values for the rest of the
pictures in the collection. Thus the user will not have to uncheck or check the same box
for every picture in the collection. In general, the system will apply the previous
picture’s settings to the current picture unless the settings for that picture have already
been defined. Such a situation would only occur if the user were to use the Previous
button to go back and change the settings of an earlier picture.
The components of the screen that are not included in these main sections are used to tell
users the final destination of their web pages, provide buttons to cycle through the
pictures of the collection, tell users what step of the web page specification process they
are currently on, and show users a progress bar to see the progress of the web page export
once they have cycled through all of the photos in the collection. The information
available to the user is shown in boldface type and is very easy to find and interpret.
Users are constantly aware of what step of the process they are on and how many more
steps they have to complete. They can also see the destination directory of their web
pages throughout the process of making them so that once they are completed the user
can easily locate them. The major sections of the page are enclosed in frames that help to
group and set apart the different elements of the web pages. The Cancel, Previous, and
Next buttons are large and easy to read. These buttons can be used to move back and
forth through every step of the process of making web pages. The system stores users’
choices for each picture until the steps are completed or the process is cancelled. Various
controls that limit the amount of manual data entry such as drop down boxes, slider bars,
and check boxes were used throughout the StoryStarter form to limit potential errors.
Figure 3. Story Options
Figure 3 shows the Story Options panel of the StoryStarter form. This represents the
default state of the various options when StoryStarter is launched. This frame is present
throughout every step of the process as users may change their mind about some of the
elements of the story and wil not want to go back to the beginning of the process to make
changes. It is not included at the end of the process because I wanted the user to be able
to think about the title page as they move through the process of creating their story. The
system assumes that users will want a title page and uses the collection name as the
default title of the collection. If users do not want to use the collection name as the title
for their web story they can simply edit the text field and supply a different title. The
option to show the Representative Photo on the title page is also checked by default, as
are various other elements commonly included in the title page. The final element of the
Story Options frame is the Photos Per Page option. This allows users to specify how
many photos they want to be included on each page. They can choose to have anywhere
from one photo per page to every photo on one page. If they choose a number that does
not divide the number of pictures in the collection evenly, an extra page will be created
for the remaining pictures.
Figure 4. Picture Options
Figure 4 shows the Picture Options panel of the StoryStarter form. This panel shows the
default status of the controls on the panel. The central portion of the panel shows the user
the picture for which they are defining options. Showing the picture in this panel is
helpful to the user as they can see the order of the pictures as they cycle through and
makes the overall look of the form more interesting. The first element allows users to
choose a border size for their picture, the default is one point. Users can choose border
sizes from 0 to 6 (in HTML sizing) from the combo box. The slider bar on the panel
allows users to choose from three different sizes to use when publishing their pictures.
Having the user choose sizes from the slider bar instead of letting the user define sizes
numerically eliminates many potential errors and possible stretching of the photos used in
the web pages.
Figure 5. Caption Options
Figure 5 shows the Caption Options panel of StoryStarter. This panel is updated for
every picture in the collection any time the user clicks on the Previous or Next button.
The user can use this panel to specify the font style and size of any specific caption in the
story. The font Arial with HTML size 3 is chosen by default. The next part of the panel
deals with the actual caption to be shown under the picture. There are two mutually
exclusive options; users can choose from any of the captions associated with that
particular picture in PhotoFinder, or they can choose to write a new caption for the
picture. The system will store their choice and which caption they choose to use if there
are multiple captions. The rest of the panel is occupied by check boxes which users can
check or uncheck to include or leave out various information stored about the photo in
PhotoFinder.
Figure 6. Final Step
Figure 6 shows the final step of StoryStarter. After the options have been chosen for the
last picture in the collection, the Next button is replaced by the Finish button. When the
user clicks the Finish button, the system creates the appropriate directories, resizes and
copies the picture files, and generates the HTML pages as specified by the options the
user has selected. If the system finds that there is already a folder with the same
collection name it asks the user if they want to overwrite the directory. If they choose
yes, the process continues, if they choose no then the Choose Story Dialog is shown
again. Once the system successfully creates the story directories it begins resizing and
copying the photos. The progress bar at the bottom of the form shows the user how far
along in the process of publishing the pages the system is. This indicator is very
important as the resizing and copying of images can take a significant amount of time,
especially if there are many photos in the collection or the user has elected to use the
large picture size. When the system is unresponsive without any indication that it is
working on something, users quickly become impatient. This progress bar shows the
user that the system is actually working on something and gives them a good idea of how
long the entire publishing process is going to take. Once the system finishes publishing
the web pages, a browser is launched showing the title page for the story if one was
included or the first page of the story if no title page was included. The system is
designed so that the web pages are completely contained within the directory with the
name of the collection. All image sources use relative paths so that the entire directory is
self-contained and can be easily moved without breaking links. This also makes editing
the pages with an HTML editor very easy. The StoryStarter tool is meant to be the
starting point for turning a collection of photos in PhotoFinder into a story. Therefore it
was designed to generate pages that were self-contained and easily editable.
Output
The output of StoryStarter is fairly simple. If the user chose to include a title page it will
be saved as default.html. The title page will feature all of the elements the user selected
when creating their story.
Figure 7: Title Page
Figure 7 shows the title page for story I have created as an example. This is way the page
looks after StoryStarter builds it. To see how I was able to edit the page you can go to
http://www.hcil.umd.edu. As you can see I included the title, description, starting and
ending dates, and the location of the collection. At the bottom of the title page is a link to
the first page of the story. If the user chooses not to have a title page for their story, the
system will not generate default.html, the story will begin with Page1.html. The page is
deliberately simple, as the goal was to produce a page that could be easily edited and
modified in another HTML editor.
Figure 8: Story Page
Figure 8 shows the typical layout for a page in the story. This is the bottom of the page,
it shows the options selected for this particular picture include the caption, people, and
date of the photo. This screenshot also shows the Previous and Next links that allow the
viewer to cycle through the pages. The size chosen for the picture was large, and there
are three pictures per page in this particular story. All of the pages in the story are set up
the same way. StoryStarter does a very good job of creating web pages can be easily
edited and personalized. It simply generates an outline of the story according to the
pictures and options the user wants to include. The user can then open the pages created
by StoryStarter in any HTML editor and add or change anything they want.
Implementation
The StoryStarter component was designed to take an existing Collection from
PhotoFinder and turn it into a collection of web pages. StoryStarter assumes that the
Collection is complete in terms of photos and information and that the photos in the
collection are sorted in the order the user wants them to be published to the web. The
StoryStarter component of PhotoFinder is written as a Visual Basic form. The form itself
is easily added to the PhotoFinder project and can be used after making only a few minor
modifications to the fMainForm.frm and the MainModule.bas files. The following
public variables must be added to MainModule.bas: myPicCount of type integer,
arrSelectedPics() of type integer array, currDirectory of type string, bTitlePageFlag as
type boolean, and DirectoryResult as type integer. The variables must be initialized
before calling the StoryStarter component; the details of the initialization are included in
the comments of the StoryStarter form dlgExportWeb.frm. After making these few
additions, the StoryStarter component is very easily added to the PhotoFinder project.
The implementation details of the StoryStarter form are fairly simple to document. This
is a fairly detailed overview of the process the StoryStarter uses to publish web pages.
The code for dlgExportWeb.frm is well documented and listed in Appendix A of this
document. Before the StoryStarter form can be called, arrSelectedPics() must be
populated with the PhotoIDs of each of the photos in the collection. Other global
variables used by the StoryStarter form must also be initialized before it is opened. This
is done in the following piece of code taken from the function Private Sub
ToolbarCV_ButtonClick(ByVal Button As MSComctlLib.Button)
in the main form (frmMain.frm):
Case "Story"
datLinkage.Recordset.MoveFirst
myPicCount = 0
ReDim arrSelectedPics(0)
While Not datLinkage.Recordset.EOF
If datLinkage.Recordset.Fields("CollectionID") = SelectedCollection Then
arrSelectedPics(myPicCount) = datLinkage.Recordset.Fields("PhotoID")
myPicCount = myPicCount + 1
ReDim Preserve arrSelectedPics(myPicCount)
End If
datLinkage.Recordset.MoveNext
Wend
dlgStoryDirectory.Show vbModal, fMainForm
If DirectoryResult = 1 Then
dlgExportWeb.Show vbModal, fMainForm
End If
End Select
Information for each page and photo that will be published is stored in page information
arrays within the StoryStarter form. The size of arrSelectedPics() is used by StoryStarter
to redim and initialize all of the page information arrays. The page information arrays are
basically arrays of flags that have three settings: 1 for Yes or Checked, -1 for No or
Unchecked, and 0 for Undefined. The flags are all initialized to 0 and then the first
position of the array is changed to the settings of the first picture when the Next button is
pressed. Since most of the settings are specified using checkboxes, arrays of flags are the
most efficient way of storing user preferences. The next picture shown uses the
information specified for the first picture as default values. Each subsequent picture then
uses its previous picture’s values as default values. This continues until each picture has
its own settings saved in the page information arrays. If the user clicks the Previous
button to revisit earlier steps, he will see that the system has stored his choices for each
picture that has been shown on the StoryStarter form.
For the options that require the user to enter text or choose numbers or strings from a
combo box, arrays of strings or integers are used. If the string is blank for a given
position in the array, the system knows that it should use the default setting for that
option. To use the caption option as an example, if arrNewCaptions(currentPic) is 0 and
arrPhotoCaptions(currentPic) is empty, the system will choose to use an existing caption
and display the first caption in the caption list. If arrNewCaptions(currentPic) is 0 and
arrPhotoCaptions(currentPic) is not blank, the system will go through the existing
captions until it finds a match and then select it in the combo box. If
arrNewCaptions(currentPic) is 1, the system will put the string from
arrPhotoCaptions(currentPic) in the new caption text field. The other drop down boxes
use the same method to show the user the current selected options and values.
Once all of the options for each picture have been recorded and the Finish button is
clicked, StoryStarter begins the process of publishing the web pages. First, page
directories are created, or if they already exist, the system asks the user permission to
overwrite them. If the user chooses to overwrite the directories, they are cleaned out,
removed, and then recreated. If the user does not want to overwrite the directories they
are prompted to choose another directory to create publish their story to. After the
directories are created, StoryStarter resizes and saves every photo in the collection to the
Images directory according to the values stored in the arrPhotoWidth() and
arrPhotoHeight() arrays. This can be a time consuming process, and updates the
progress bar every time another picture is resized and saved to let the user know the
system is working. Once all of the images are saved, StoryStarter pieces together the
web pages. Using the arrays of flags to build the pages, StoryStarter gets the appropriate
information from the database tables and writes HTML statements to a file. The system
figures out how many pages will be generated and provides links at the bottom of each of
the pages to go back and forth through the story. Once all of the pictures and arrays have
been iterated through, and the pages have all been successfully published, StoryStarter
launches the user’s default browser with the title or the first page of the story.
Evaluation of StoryStarter
The goal of StoryStarter is to take a collection of photos from PhotoFinder and turn them
into web pages that can easily be edited and turned into a story. In order to evaluate the
effectiveness of the StoryStarter component, I have generated a story from the collection
of photos taken during my trip to Florida last summer. As I knew I would be making
screen shots from the story, I decided to use only one picture per page. I found I cannot
accurately evaluate the effectiveness of the StoryStarter form itself because I designed it.
I have intimate knowledge of every checkbox, combo box, text box, and slider bar on the
form. However, I can evaluate the effectiveness of the component in terms of creating
web pages that are easily modified into a real story. I used my HTML editor of choice,
Macromedia Dreamweaver, to edit the pages generated by StoryStarter and found that
writing the story was an easy and an enjoyable experience. Having the pictures, captions
and other information I wanted included in my story already placed on the pages made
writing the story simple. It also helped me remember the aspects of the story I wanted to
recount in my web pages. I enjoyed writing the story and was happy to have a very
customizable page generated for me that eliminated the tedious tasks of importing images
and writing captions. Moving the story to my personal home page was very simple, I
uploaded the single collection folder that StoryStarter generated for me to my WAM
account using an FTP client. Because StoryStarter copied all of the pictures in my story
to an Images folder contained within the story pages folder, none of the image links had
to be updated. The links that allow users to cycle through the story all worked perfectly
also. Using StoryStarter to help write the story of my vacation to Florida was an
enjoyable experience. I am very happy with the way the story turned out, and with the
way StoryStarter worked out. I think this component adds a pretty significant capability
to PhotoFinder and I will certainly be using the application to manage my digital pictures
and publish web pages in the future.
In order to evaluate the StoryStarter component itself, I asked two people to try using it.
The sessions were fairly short, the subjects only tested the component itself and looked
over the output. The first test subject is an expert user of PhotoFinder and used his own
collection of photos to generate web pages. He stated that he liked the wizard-like
interface and that it was very easy to use. He did not agree with some of the default
values that the StoryStarter component uses, but they are easily changed. As for the
output of the component, the subject was satisfied with the results. However, he did
mention a few formatting issues that could be addressed.
The second test subject was not an expert user of PhotoFinder. I gave her a brief run
through of the existing PhotoFinder application, showing how to set up collections,
provide information for each photos, and how to annotate the photos. Then I explained
the point of StoryStarter and asked her to use the component to create some web pages
using the collection of photos we just created. The collection she used had fifteen
pictures in it. The subject looked over the Story Options section of the page and did not
change anything. Then she moved on to the Picture Options section. She changed the
default border size and then changed the picture size using the slider bar. The subject
commented that she had expected the picture to respond when she moved the slider bar to
change the size. In the Caption Options section, she used the existing captions when they
were available and typed in her own when they were not. The subject checked and
unchecked some of the check boxes for the first five pictures or so and then just stuck
with the same options for the rest of the pictures. When she was about to click the finish
button I called her attention to the Photos per Page option. When I asked if she wanted
only one photo per page, she changed it to 3 photos per page, and said she did not notice
the option before. Then she clicked on Finish and waited while the pages were
generated. After looking over the pages StoryStarter produced, she said she liked the
way the pages turned out and said they would make a pretty effective web page without
any external editing.
Limitations and Future Extensions
The test subjects helped uncover some of the limitations and possible future work that
could be done on the StoryStarter component. Currently there is no way to specify
certain options and apply them to the whole collection without actually cycling through
each photo. Perhaps a shortcut could be implemented that would allow the user to
specify options that would be applied to the whole collection and then generate the pages
without having to cycle through each photo in the collection. This would be especially
helpful in collections that have more than 20 photos. A couple of interface issues were
also brought up in the tests. It seems that the Photos per Page option should be visually
emphasized on the form, since it is one of the more important features of StoryStarter.
Also, the picture shown in the Picture Options section should probably react to the
Picture Size slider bar. The actual size of the picture can not be shown on the form so it
would have to be shown as a scaled down version. Unfortunately, this is likely to
confuse the user if they do not understand that the picture on the form is only 50% of the
size of the one that will actually be output to the web pages. This issue requires further
study. A final issue brought up by the test subjects is the choice of the default options. I
choose the options I felt users would want to include, but perhaps a study should be
conducted to find out what options actual end users want to include in their web pages.
The few tests I was able to conduct showed some of the limitations of StoryStarter and
gave some useful ideas on how to improve the interface.
There are several possibilities for future extensions of the StoryStarter component. One
of the most useful features in PhotoFinder is the ability to search for photos of specific
people. It would be great if this functionality could be passed on to stories created with
StoryStarter. The implementation of such an extension would be extremely difficult and
require many new tables and relationships to be created in the PhotoFinder database.
Another future extension might involve the ability to save a partially completed story and
open it and finish it later. Perhaps editing an existing story could also be tied in to this
functionality. Implementation of this feature would also be very difficult given the
current structure of the PhotoFinder program and database. A very ambitious future
extension to PhotoFinder would be a reasonably complete HTML editor, where users
could start and finish web pages using photos stored in the program. I feel that this early
version of the StoryStarter component accomplishes the goals I set at the beginning of the
project and opens the door for some very interesting future projects involving
PhotoFinder and the Internet.