The Challenge
This particular interaction was inspired by my dive trip to Solitude Lembeh Resort in Lembeh, Indonesia and motivated by my passion for scuba diving and love of underwater photography. All the photos you’ll see in this interaction were taken by me (excluding the background coral shot).
I wanted to design an interaction that would make the most of the subject matter and compliment the vibrant nature of Indonesia’s underwater marine life. However, I didn’t want to create just a slide show of fish photos. That’s what my Instagram is for! I decided early on that I wanted my interaction to have additional educational value by offering a summary of interesting facts about each of the underwater creatures.
The Design Process.
Visuals: For this project, the design process really started with the selection of the visuals. I had a lot of photos from my trip and I needed to narrow the selection down to a manageable amount to keep my interface from feeling overly cluttered.
I tried to choose high quality images that I felt were visually striking and showcased some of the more unique and interesting marine life that could be found in the Lembeh Strait. It was hard to pick just four photos and I do have enough content to drastically expand this project at a later date.
Storyboarding and Design: After I had selected my main visuals, I began working on the layout of the tab menu. I tried several different layouts and worked for awhile to get the correct portions. I settled on a simple but vibrant design with colors that complimented each of the photo subjects.
Articulate Storyline: This was the first interaction I ever created in Articulate Storyline. Using states, variables and triggers I created custom intuitive button behaviors that increased the menu’s usability and appeal. When a user hovers their mouse over a button the color shifts. It returns to its original state once the user’s mouse moves off of the button.
Once a button is selected, the button glows and a pop-up window (actually a new layer) is revealed. This is where information on the subject appears. Once a selection has been made, one button always remains selected.
I also made use of Storyline’s built-in picture zoom feature to add an extra layer of interactivity to my design. By clicking on the icon, a user can expand the chosen photo to get a closer look at the subject. I felt that including this feature would make the most of my photos and add a certain wow factor to my project.
