The day is beautiful, the sun is shining, and it’s a perfect opportunity to get some Axure work done. Since we simulated the WIndows 7 Desktop in a browser in our previous tutorial How to Prototype Windows 7: Part 1, we now need a login screen to get to that Desktop. As we all know, PCs aren’t known for their security features—I joke, I joke—so our prototype should show the logical order of logging into the OS before seeing that pretty Windows 7 Desktop.
Let’s get started!
1. Find an Image of the Windows 7 Login Screen
Unlike WIndows 7 wallpaper, an image of the login screen was a little harder to track down. By harder, I mean it took me 45 seconds instead of the usual 10 because I had to scroll down the page a little and actively use my eyeballs. Am I spoiled or what?
This image served my purpose well:
2. Perform Some Photoshop Tricks (optional)
Nothing fancy here, I just replaced the existing account icon with the Axure logo. It seemed fitting and only took a minute. The image file was heavy weighing in at 225k, so I saved it as an optimized JPEG then ran it through ImageOptim to shave an extra 10k off. The final image is 89% smaller at 25k, which will decrease page load times. Every little bit helps.
3. Create a New Axure Page with the Image as the Background
In your Axure file, with the previous wallpaper screen you created, add a page called “Start Screen” and move it above the Desktop page to appease the hierarchy gods:
Next, create a new Page Style Editor profile called “Win7 Start Screen.” Check Page Align and set it to Left then check Back Image and click the Import button to upload your Windows 7 login image as the background:
After you select the “Win7 Start Screen” option from the Page Style drop-down menu, your Wireframe Pane should look like this:
4. Simulate the Password Field and Login Button
This part’s super fast and requires some finishing touches to make it look real. First, using Axure’s default Wireframe widget library, drag the textfield widget over the password textfield that exists in login screen image:
Toggle the border for your textfield widget off so it doesn’t conflict with the textfield in the image:
Nothing like a 400x view to prove my point:
Change the textfield’s width and height properties and position it inside the existing textfield to create the illusion that there’s only one on the page. I have my text properties set to Arial 12px so the font doesn’t look ginormous onKeyUp and I set the textfield to Mask Text so little dots appear when the password’s typed in on the prototype:
Lastly, add an Image Map Area over the login button and link it to the Desktop page using an onClick event:
5. Add Sound onPageLoad of the Desktop Page
This prototype wouldn’t be complete without that catchy Windows login sound we’ve all come to know and love. This part took the longest, but I finally got the sound to work in Axure by loading an external HTML file into an inline frame onPageLoad.
Here’s the HTML code:
<!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" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head><body> <object><param name="autostart" value="true"><param name="src" value="login.mp3"><param name="autoplay" value="true"><param name="controller" value="true"><embed src="login.mp3" controller="false" autoplay="true" autostart="True" type="audio/mp3" /></object> </body> </html>
(Sidenote: If you know of a better way to play sounds in HTML files that more cross-browser compatible, let us know!)
Save your HTML file as login.html and place it in the same directory as your prototype files along with login.mp3 for it to work. In your Axure file, go to the Desktop page and drag an Inline Frame widget to your Wireframe Pane. I made mine 1px x 1px and positioned it in the top-left corner of the screen (x=0,y=0) so it’s not noticable.
Give the inline frame widget a Label so you can find it easily in the Case Editor:
Click on the Page Interactions button in the Page Properties Pane and double-click the onPageLoad event. Choose Open Link(s) in Frame(s) from Step 2, click on it again in Step 3, then check the “inline_frame_sound” from Step 4 and link to your external HTML file file login.html:
Case 1 for your onPageLoad event should look like this now:
Remember, if you’re using AxShare for your prototypes, you have to host your HTML and mp3 file somewhere else because AxShare won’t host them for you.
6. Browser Test
I’ve only tested the sound in the latest versions of Explorer, Safari, Chrome, Opera, and Firefox. Imagine my surprise when I noticed I was upgraded to Firefox 6.0.2 when I thought I only had 5.0! What would we do in a world without forced browser updates, hmm?
Anyway, remember to collapse the left sidebar when your prototype loads and go into Full-Screen or Presentation Mode to make it feel like a real WIndows 7 experience. Your login screen should be pixel-perfect complete with a masked password textfield and login button that triggers the Desktop page to load and that melodious login sound to play.