Why should you create a prototype?

"You are iterating your solution as well as your understanding of the problem" - Aza Raskin

What do you think of when someone mentions building a prototype? We readily use this word in creating software these days, but the origin of this term in manufacturing is relatively recent. The concept of building an electronic version of a product first to validate that it can be built before starting the expensive process of manufacturing a product came into existence in my lifetime.

Just a short twenty years ago I worked on a product that helped optimize the design of aircraft engines before they were manufactured. This product saved our customers millions of dollars. Why? A Boeing 777 engine has 3 million parts provided by 500 suppliers. There are so many constraints involved that changing one simple parameter has ripple effects throughout the engine. What needs to be done to save money, reduce weight and increase efficiency? This is clearly an engineering manufacturing problem.

So we may not be able to achieve as great as results in designing and building software products, but the idea to quickly create something to be reviewed with consumers of the software has a direct benefit to us a well. It seems so obvious to me to build prototypes as that is what I love to do, but I need to step back a bit and explain why they are useful.

Let's start with low-fidelity prototypes first. Now many times have you heard about people starting a company by drawing their ideas on a paper napkin during a lunch meeting? In today's terms that can be translated into creating a Minimal Viable Product (MVP) as quick as possible. In the UX world this is manifesting itself in the popularity of sketching on paper or whiteboards. The idea is the same in both cases, as you want to fail early and inexpensively when it is easy to change directions. When showing end users a low-fidelity sketch, you want to get them to look past the visuals and concentrate on the tasks, scenarios and workflows to validate we have captured them correctly. In this day and age people expecting pretty visuals so this is not always easy to accomplish successfully.

Next up we skip to high-fidelity prototypes. These are visually appealing with nearly complete set of graphics and sometimes fully functional by using fake data that is relevant to the user context. The only indication that these are prototypes and not a real application may be that only certain paths are working. The textual content will be mostly complete so all parts of the app can be tested with real end users. These are really useful to demonstrate progress to upper management or to gather excitement with the sales staff on a new product. The hardest part of building these is to know when to stop and which level of detail is just right. It is too easy for people to keep asking for more functionality to be added to prototype.

Now we have arrived at the ideal, where we build medium-fidelity prototypes. It more than just a sketch but does not take as much as time as a fully functional great looking prototype. The key is to build just enough to communicate the intended design and to get everyone to participate. Whether user testing or giving demonstrations the idea is to catch mistakes early and to quickly correct them. This can be a great tool to gather detailed requirements on what the product should do and to gather feedback.

"The value on an idea is zero unless it can be communicated" - Aza Raskin

Quotes on creating prototypes

Fail early and inexpensively - Real innovation always includes a risk of failure. By building a prototype, you can quickly weed out the approaches that don’t work to focus on the ones that do.  

Recognize That Ideas Are Cheap - The expense lies in testing and verifying what has economic value. A great prototype is often the best way to start a dialogue with potential customers and test your idea’s value.

Start With a Paper Design -  For a user interface or Web software prototype, a paper design is efficient and effective for quickly working through the functionality. You can get peers and, hopefully, customers to give feedback on where images, text, buttons, graphs, menus, or pull-down selections are located. Paper designs are inexpensive and more valuable than words.

Put in Just Enough Work - here are two good reasons to prototype: the first is to test the feasibility of a software product, and the second is to create a demonstration and gain customer feedback so you can price and put a value on your innovation. Keep these objectives in mind and be careful not to fall in love with the process.

http://www.ni.com/white-paper/8752/en/

Find Design Issues Early - Things we conceptualize in our heads that seem awesome regularly turn out to be terrible ideas when we put them in a more concrete, visual medium such as a piece of paper or a computer screen.

Compare Design Variations Quickly - Comparing several designs with each other is made easier through prototyping. What’s a better solution: a tabbed navigation menu or a list of links arranged vertically?

Gather Design Feedback Better - By simply describing your user interface ideas, it may be hard for others to grasp what you’re trying to achieve. This can result in poor feedback due to misinterpretation.

Prototypes can be a Presentational Tool - Prototyping your design concepts can be an effective way to illustrate your ideas and get approval/sign-off from your higher-ups.

Be Able to Perform User Testing Early On - A prototype can put user testing at the start of a project, instead of at the end.

Prototyping is Cheap, Fast, and Easy

http://designinstruct.com/web-design/prototyping-is-essential/

By definition, prototypes aren’t perfect because their purpose is pragmatic; they elicit feedback.

Prototypes should be, above all, quick and painless to create.

http://www.uxbooth.com/articles/considering-prototypes/

How to prototype and influence people

To design is to inspire participation.

The value of an idea is 0 unless it can be communicated.

To convince yourself and others of an idea.

You are iterating your solution as well as your understanding of the problem.

http://www.azarask.in/blog/post/how-to-prototype-and-influence-people/

Prototypes are a much better at communicating a design. It’s much easier to sit down with designers, developers, product owners and of course users to get feedback and to run through design ideas if everyone can see how things might work with their own eyes.

Prototypes are more user friendly. Where as people are often scared off by wireframes everyone understands what a prototype is (just make it clear that prototypes are very different from the finished article).

Prototypes require less documentation as they are less open to interpretation and on-page interactions can be mocked up. If you do need to document your prototypes (hopefully with an emphasis on ‘just enough’ documentation) then you’ll find yourself having to write many fewer comments for a prototype than a set of wireframes.

Prototypes better support user-centred design. It’s much easier to carry out usability testing with a prototype than a set of wireframes and to get lots of juicy feedback from users in general.

Prototypes require less work. If you are careful to prototype ‘just enough’ to get the feedback that you need then prototypes typically require less work than wireframes because you’ll need to write (and maintain) less documentation.

http://www.uxforthemasses.com/rapid-prototyping/

Visual fidelity (sketched ↔︎ styled)

Look and feel are the most noticeable dimension of a prototype’s fidelity and, if not properly selected, can sidetrack prototype reviews. Go hi-fi too soon and users will focus on visual design, which is not appropriate in early stages. From a visual standpoint, prototypes do not have to be pixel perfect but should be proportional; for example, if the left navigation area has to occupy one-fifth of a 1024-pixel screen, it does not need to be exactly 204 pixels wide, as long as it is proportionally depicted in the prototype. As prototyping progresses through the design cycle, increase visual fidelity as needed by introducing elements of style, color, branding and graphics.

Functional fidelity (static ↔︎ interactive)

Does the prototype reveal how the solution will work (static) or does it appear to be fully functional and respond to user input (interactive)? This dimension is less of a distraction to users, but adding interactivity in subsequent iterations increases functional fidelity and allows the prototype to be used for usability testing and training and communications.

Content fidelity (lorem ipsum ↔︎ real content)

Another dimension that often distracts users is the content that is displayed in the prototype. Squiggly lines and dummy text like lorem ipsum are useful to avoid in early stages of prototyping. But as the prototype is refined, evaluate the need to replace dummy text with real content to get a feel for how it affects the overall design.

http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

Low-Fidelity - sketches, sticky notes, whiteboards (easy to create and inexpensive to change)

Medium-Fidelity - partially complete for a single workflow or task flow for user testing

• Communicate design - A prototype demonstrates to a client what functionality the system will deliver and what it will be like for users to interact with that system
• Allow for participatory design - Available to the client team, the development team and a wide variety of users, prototypes lend themselves to a participatory design process where many key roles have to "buy-in" to the nature and behavior of the final product.
• Catch mistakes early - Ideally, prototypes are frequently tested in formal and informal usability sessions throughout their development.
• Support iterative development - In this way, the Web site or application interface can evolve (through the process of either adding, refining, or removing features and functionality) until it reaches a stable state.
• Facilitate detailed requirements gathering - Because prototypes provide a common ground of understanding between users, client team members, and development team members, they greatly help in establishing business requirements, application requirements, and use cases.
• Guide later development stages - Application Developers can use the prototype as a live representation of the use cases (even to the point of using prototype pages as a test front-end to their code) and to understand how the system is intended to interact with users.

High-Fidelity - complete graphics and functionality and tie in to dynamic data sources

Caveats of prototyping - Yet it is easy for both clients and team members to want to see more and more functionality and detail included in the prototype

http://www.inovdesigns.com/prototypes.php

The best arguments in favor of low fidelity prototypes are:

1. Fast to build
2. No technical or design ability required
3. Prevent tunnel vision — don’t distract the end user with visuals
4. Get good feedback fast

The reason high fidelity works so well can be summed up with one word: Engagement. No matter who your stakeholder – executive, end user, developer, UX pro – higher fidelity prototypes grab and hold you users attention much more effectively than low fidelity.

http://community.protoshare.com/2013/02/high-fidelity-prototypes/

Choosing the right visualization

As of the start of this year I became the director of sponsorships and memberships for local chapter of User Experience Professionals Association (UXPA). The first thing I envisioned that I need to learned about was what the current and past members liked and disliked about our organization. It was time to create survey to get some input. With hundreds of members I was expecting a potential problem of gathering too much data, but that is a good problem. I thought of using SurveyMonkey or WuFu Forms. Then someone mentioned Google Forms, so I found them very easy to setup and use. I created two forms, a simple one for past members comprised of three questions. I wanted to give open ended questions to let them freely share their thoughts. I created a second form for active members where I wanted to gather more detailed information. I shared the two forms with the other executive members to get their feedback. That one step was the best decision I made in the process. A couple of them had great ideas which made the forms even better. One of the board suggested I look at a government site on building surveys, which I surprising found very useful. The companion usability.gov site was even more interesting as it looks well designed and also has useful information, which was a double shocked. It is interesting how perceived notions sometimes don't help us at all.

After gathering just five days of survey data, I only have 19 responses from active members, which is disappointing but still better than guessing or having no data. I wanted to explore creating a visualization of the data collected from the survey as I used a rank order to try to figure out what members like that we are cur renting doing. This is my survey data:

Rank	Book Club	Webiners	Workshops	Community Events	Social Events
member 1	5	2	1	3	4
member 2	5	2	1	3	4
member 3	5	2	1	4	3
member 4	5	1	3	4	2
member 5	4	1	3	2	4
member 6	3	2	1	1	2
member 7	2	3	1	3	4
member 8	5	4	2	1	3
member 9	5	4	1	2	3
member 10	4	1	2	3	5
member 11	3	2	1	4
member 12	1	1	1	1	1
member 13	5	3	1	2	4
member 14	5	2	1	4	3
member 15	3	2	1	3	5
member 16	4	3	1	2	5
member 17	4	3	1	2	2
member 18	3	2	1	5	4
member 19	3	1	1	3	2

So I want to creating a visualization of this data to know what is important to our members. I used a "rank order visualization" google search to see what I could find. I found a gem in one of the UX stack exchange entries, where a discussion of using column charts, pie charts, bubble charts and even Excel spark lines was suggested. I looked at another Stats stack exchange article which was a deeper explanation on using spark lines. Then I got a bit crazy and wanted to look up existing research on how to visualization my data as it just seemed like a old problem. I found this interesting IEEE article from GaTech on using a heat map. While exploring, I then wondered how people visualization Likert scales, which I did not use for my surveys but it is definitely related and maybe be helpful. I found this great article which I need to file and use in the future. I especially like this one:

I am also quite fond of this paper on correlating rankings and then realized I was getting a bit off track. I went to the site for my favorite graphing package called HighCharts to see how easy some of these could be achieved. I really like bubble charts but after looking at the data I realized that this is not the correct visualization to help me. Finally after a couple of minor diversions, I went to Apple Numbers to add the data and created a summary table of the counts of each ranking by type and came up with this simple column chart that tells me every I need to know:

I just look at the column chart and find the largest bars for each type and I am done:

1st - Workshops
2nd - Webinars
3rd - Community Events
4th - Social Events
5th - Book Club 

How to select a mobile prototyping tool

This week I needed to find the best prototyping tool to build a series of user testable interfaces on an iPhone. I have built several prototypes using Balsamiq but it was always in the context of trying to gather feedback from product owners on workflow thru the app design. It is a great tool as they supply templates for just about any user interface know to man on their Mockups To Go site. I like using this tool to capture my vision and to explore several alternatives. Using the Balsamiq templates, I can quickly see if the design will actually work. I also use the prototypes to test user scenarios so I know they work at least for me. If I cannot get thru the work flow navigating thru the app then there is no need to test actual users on the interface. Another side benefit of this type of prototype is to get general acceptance from the product owner. Whether it is used to get additional funding or to demo to potential customers as a sales aid, when working with entrepreneurs I find these visual prototypes are invaluable. The product owner is paying for a product and a prototype can definitely help them visualize what they are spending their hard earned money on. Of course there is nothing better than actual end user testing, but their time is precious also and should not be wasted with half baked prototypes that cannot pass a smoke test.

The best thing about Balsamiq is that it has two modes for creating an output clickable PDF. It can look either like a hand drawn sketch or a wireframe. Another nice feature is when exporting a PDF the output can be optimized for viewing (which is great for discussion of annotations recorded in document) or by shrinking the output to fit a page (which is ideal for printing the PDF to make hard written notes while in a conference room). The last feature that I find really useful is that the link hints are optional. For user testing you never want them to appear, but when in initial discussions they are really helpful for the product owner to see the intended user flow thru the app.

Since I was already familiar with Balsamiq, I started building a two page prototype by using Words with Friends app. It was an app I use all of the time and it has some interesting uses of standard iOS controls as well as some custom components. My intent was to see how long it would take to build the two screens including all of the visual treatments and the interactions between the two screens. I also need to use the standard iOS 7 look-n-feel. This is very easy for Balsamiq as the iOS 7 templates already exist at their site. The biggest unknown for me at the start was how the clickable PDF would work on my iPhone. The end result has to be a workable prototype that actual users can use so it cannot just look good it has to be interactive and useable.

1) Added iOS 7 controls inside iPhone device using Balsamiq template

2) Removed device template

3) Duplicated first page
4) Shifted content to right
5) Added settings screen
6) Added clickable links on vertical bars icon

 My first attempt at getting the clickable PDF on my iPhone was to email it to myself. When I opened the PDF on my iPhone, it was not the best user experience as the PDF was embedded in the email app  decoration and the links did not work. I tried both Yahoo! and Gmail and neither one of them were acceptable. I have both Dropbox and Goggle Drive, which worked by using the equivalent of a preview app on the iPhone. My next attempt was using an app called File Browser as it integrates with iTunes. When I connect my iPhone to my Mac, I can then drag the clickable PDFs to the File Browser app and that works as well. I needed to find a better way as I did not want to depend on DropBox, Google Drive or having the physical device attached to my computer.

After an hour of research I found an app called Documents by Readdle. It was a great find as it supports all kinds of network storage alternatives and I have absolute confidence that any iPhone used for testing will have access to one of these methods. The list is quite impressive: iCloud, Dropbox, WebDAV Server, Windows SMB, Google Drive, FTP Server, SFTP Server, SugarSync, Box, Office 365 Sharepoint, SkyDrive and CloudMe. Even better the app has settings on how to view a PDF by using the built-in iOS Viewer or the Readdle PDF Expert. This is the best find of the week as it is also free!

After getting that to work, it was time to switch to something completely different by using a tool I had not previously considered. I found a great list of prototyping tools written in July, 2013 and posted on Alan Cooper's web site. I am not a big fan of subscription services, mostly because I don't do prototyping full time. I am also not a proponent of becoming an expert in a single tool as that tool may become obsolete by the time I conquer it or a better one may come out and then switching will not be that easy. I spent time evaluating two tools. The first is called AppCooker but it has a big draw back as it only runs on an iPad. There is a similar tool called Blueprint. Both of these tools come with free app viewers with examples to try them out. It turns out they both did the standard iOS Clock app so that made it easy to compare them on the user interaction side. I was not impressed with either one enough to buy them on my iPad. For starters, why would I want to build a prototype on an iPad for an iPhone? Time to find another tool.

One tool that kept popping up in searches and blog posts was called Antetype, so I thought it would be good to study it. They have nine training videos on their web site so I watched them all to get a feeling for whether I would like to use it. It has many great features and I am sure you could build any prototype known to man using it, but with great flexibility comes great complexity. They also had a community and an impressive gallery on their site. I would be willing to invest time in this tool if it was my full time job, but since it is not I need to find something else.

One of my favorite speakers and writers is Luke Wroblewski, so I searched his site to see if he had any suggestions. Lo and behold, he suggested Keynote. Several years ago I used PowerPoint to quickly put together a linkable presentation but it was just so simple that I never considered using it again. It turns out that a company called Keynotopia has created templates for Keynote to do the same thing as I had done with Balsamiq. Besides having a great web site, there list of templates or themes as they call them is very impressive. Before buying the Keynote Bundle I tried build a couple of simple pages in Keynote with custom transitions. I typically don't like such things in a presentation as I find them distracting, but to simulate iOS page transitions, it seems like a perfect alternative. TI quickly found the best thing about using the Keynotopia templates as all of the iOS 7 components are vector drawings! The following screenshots show how close these are to the Balsamiq screens. It took about the same amount of time but that is good news as I have never used Keynote in this way before so I can had a learn how to best to set links and use the templates. The first tricky part was adding a clickable link that works on the iPhone. The best way I found was to add a transparent region around the vertical lines icon; otherwise, even with the lines being grouped together, the tapping on the iPhone did not work properly. I also found that using the Push transition was perfect to simulate the switch from one of these screens to the other. When on the first screen the transition was left-to-right and when on the second screen the transition was from right-to-left. Wow did that work perfectly and look great at the same time.

first screen using Keynotopia

second screen using Keynotopia

Since I am surrounded at work with great developers, I thought a third option would be to let one of them build the same thing using Apple's Xcode. All of the data would be static so I wanted to see how much storyboards could be used with the absolute minimum amount of Objective-C code. At the start I thought it would be nice to use only storyboards, but we soon discovered that in this case that was impossible. The biggest amount of effort was spent on getting the page transitions working correctly and also getting the second screen appear with the first screen partially exposed. This behavior used in many iPhone and iPad apps is not built into iOS controls and so must be manually created. I also did not want to bring in any other external libraries to help us. It was really an exercise in creating the very same interface and discovering which one would be the best way to deliver prototypes. The only real drawback to the native iOS app is that we would have to use a tool like TestFlight to deploy the app outside the Apple store for user testing. The best thing of all about the using Xcode to build the prototype is that scrolling to see the rest of the contents in the first screen just works as expected, but in the Balsamiq and Keynote prototypes, this behavior would have to be implemented as separate pages. It can be done, but is more painful and time consuming.

first screen using Xcode

second screen using Xcode

As in everything I do, there are tradeoffs to be considered. I definitely prefer Keynotopia to Balsamiq as the iOS 7 templates are exhaustive and look just like a real app. I like how easy it is to create transitions in Keynote that look just like using a real app. I definitely like using the Readdle app as I don't need to deal with locating the device ID to enter into TestFlight as is used to deliver the Xcode app. Some of the things that the developer did to get this to work were just not reasonable for me to know and remember since I don't do iOS development, so that is definitely a drawback. For now I am going to se Keynotopia if I have to build a prototype by myself and if I have a developer helping me then Xcode wins hands down.

From concept to reality in 6 weeks - final meeting prep

In preparing for the final iteration meeting with the customer, I took a few screenshots and created a Keynote presentation. Pretty simple stuff, just time consuming to make sure I have everything covered. At the client site I do not have an internet connection so I want to make sure I have it all covered.

On Friday, I saw a problem in trying to create the app as an installable package as I never received the email confirmation code. I found that odd since it has been working all along. The only thing I can think of is that somehow my license expired. I paid for the developer license so I have no real logical explanation. I need to have an installable image ready to go before the meeting either stored on my machine or on a thumb drive to give to the customer.

I search Ms. Google to find out why my two-step confirmation code never arrives. I found a Microsoft document explaining how to set this up as I definitely could not remember doing that. I went to Safari and logged into my live.com account. I went thru the steps to enable the two-step verification under my live account. I clicked on the icon in the upper hand corner for the Outlook web app. Then I clicked on "Security info" on the left hand side. I added my phone number as I need a fallback when my email does not work. I also added a second email account. The only odd thing about the process was installing an authenticator app on my iPhone. After doing that I had to scan the QR code on the screen to validate my iPhone. Once I had all of that setup, then when I tried to create a new package in Visual Studio, I opened the Authenticator app on my iPhone and entered the blue number on the screen. Now I should be all set from now on.

One final odd problem for the day as it is coming to a close. I cleaned and re-built the app and everything runs correctly, but when I build the Windows Store image it fails with 16 errors and those are all methods I renamed over the last two weeks. It must be stored in a file somewhere that I need to regenerate. Time to use Ms. Google again as I have not encountered these errors before. After much searching and searching and searching, I finally found the answer deeply embedded in a StackOverflow post. The only  way to fix the problem was to delete the "obj" folder and then rebuild the project solution. That is obviously to get around a VisualStudio bug as that does not make sense why VSE would cache such things when building release packages. I am just so glad I found the problem finally.

I finished the release build, made a ZIP file and now I am ready to go.

From concept to reality in 6 weeks - RECAP

This is a summary of what was done each day from start to finish, which included the second phase of the project:

Day 1 - buy a Windows 8.1 laptop with touch interface
Day 2 - get Windows Phone development environment working on Windows 8.1 Pro environment
Day 3 - learn about BingMaps and VisualStudio Express
Day 4 - learn how to load data from server using BackgroundTransfer
Day 5 - learn about Metro UI using XAML + 3rd party component libraries
Day 6 - read Windows Store app UX guidelines + using single Application Bar + first iteration meeting with client
Day 6.5 - create Microsoft developer account + learn how to submit app to Windows Store
Day 7 - custom application icons & fonts + UI layouts + create 1st deployable package to give to customer
Day 8 - learn about Windows 8 Application Lifecycle + how to use dialogs
Day 9 - retrieve live data from server and process as JSON and then display on BingMap
Day 9.5 - load free Perpetuum Windows Store controls
Day 11 - ask for more developer help to build custom controls + learn how to debug exceptions
Day 12 - parse all live data as JSON and display on BingMap as push pins
Day 13 - use Telerik DualRangeSlider + formatting numbers + learn LINQ
Day 14 - learn C# interfaces + create custom font using IcoMoon.io + learn how to create custom images dynamically in code
Day 15 - switch to BA3 mapping engine + learn how to do string manipulation in C#
Day 16 - generate dynamic markers with ImageMagick
Day 17 - check each image anchor point + explore how to install app outside Windows Store
Day 18 - figure out how to use and debug asynchronous methods + deploy outside Windows Store + how to read/write files locally on device
Day 19 - more success with LINQ + debug geographic issues with GPS coordinates
Day 20 - learn about notifications and bindings + how to use custom app colors
Day 21 - learn more details about strings + rewrite all of server download code to use HttpClient
Day 22 - deal with 500 error codes from server + change app so it works without internet connection by loading local files instead of loading data from server + centering map in geographic center of USA with extents to show some of Alaska
Day 23 - app stops working at most inopportune time
Day 24 - all 4 map layers working correctly + important customer iteration meeting + whole app in good working condition
Day 25 - use Telerik Date/Time controls + StackPanel compared to Grid layout + theming Telerik controls
Day 26 - list of all Metro controls + VisualStudio app reports + timing app usage using StopWatch class
Day 27 - prepare for final iteration meeting + create test data to validate all 4 layers on map

This was the start of Phase 2, since I ran out of the allotted money allowed for the initial project, I had to get customer approval before resuming on the left that remained that was not essential for the CES conference:

Day 28 - resolve some of related issues to uses of Telerik RangeSlider for filtering
Day 29 - property change notifications + pointer events
Day 30 - use Windows Store app Settings + saving Settings as local data
Day 31 - localizing date/time output + button FlyOut menus
Day 32 - live update at periodic intervals + mathematical formulas related to GPS coordinates
Day 33 - missing BA3 mapping functions + create temporary work arounds until BA3 can deliver updates
Day 34 - Windows Store app SearchBox + popup placement + working with collections to remove and find whether element already exists + more geographic mathematical formulas
Day 35 - major typo found in bearing calculations + BA3 mapping engine update
Day 36 - merge two collections + email issues + reboot to install patches
Day 37 - retry logic for server failures + ListView for search results

From concept to reality in 6 weeks - part 37

In many ways today is a sad day is it is the last day I have to work on the Windows Store app. To start the day off in the correct musical mood I am going to listen to "North Mississippi Allstars". Next week I am going to write a couple of summary blog entries to recap all of the things I learned from a couple of views.

For now I just need to wrap up and test as many of the features as I can. The beauty of working on my laptop is that it is not a simulator or emulator as the machine is also a touch device that is the target of this app. I don't expect to try any new C# stuff today but you never know...

The very first thing I encountered was numerous 500 and 502 server errors. I have ignored these long enough as I need to add some retry logic as they always seem to work when I try them in Safari on my Mac. When in the debugger I see an odd HResult code but that is not going to help me as I tried to look that up in the Microsoft error codes and it was not a match. The real ticket was looking up the HttpResponseCodes as that is very easy to retrieve. I set a a maximum number of times to retry so I never get into an infinite look when the server is not working at all or the internet connection fails. When that happens I make sure the progress dialog is closed and a MessageDialog is shown so the user sees the actual error message. That is my first error I have shown in the this app so I feel pretty good about that.

I have been testing the live updates for a while and found several issues that have to be fixed. When part of the data is filtered and new data arrives then the data is not stored correctly. That was pretty easy to fix. I was a bit worried at first as it seemed like a major problem.

Then I switched to changing the way search worked as it was only partially implemented. I need to match the iPad functionality but at the same time make it look better and act better. It is kind of late to do this but I am confident that it can be done. The first thing I want to do it make the search popup on the right hand side of the app (kind of like the Settings). It turns out that is way harder than it should be. I first tried to change the placement location as documented. When that did not work I tried looking for other answers but some were so complicated that it just did not seem like the right thing to do. In the end the solution was to set the HorizontalAlignment to be on the right side, but that pushed the whole popup off the screen. Then I set the HorizontalOffset to be the negative of the popup width and bingo all was resolved.

After trying a couple of different things using multiple StackedPanel and then a Grid to display the custom search results, I tried wrapping them both in a ScrollView but that was not a good idea. It was a good guess but totally the wrong thing to do. I abandoned everything I have done so far and looked up the GridView or ListView to learn about how they are different and which would be better for me. I decided ListView was better so I was off to explore a brand new part of a Windows Store app on my final day - sounds dangerous but it was just what I needed or so it seems. Thankfully the ListView quick start guide was perfect and I was up and running quickly. I created a new model class to hold the search results to be displayed in the ListView, which was a small subset of the observations data model. Perfectly simple and made perfect sense. As a first pass I just added a ToString method in my new model class and the data displayed correctly the first time! I guess I am getting the hang of this now.

I need to make it look stylish so I need to find the style template names. ListView has been around so that was too easy as they are all documented. I read up on the ListView guidelines to make sure I was not doing something odd. The only tricky thing was I needed to apply the style programmatically, which is not something I even know how to do. A quick search on the MSDN blog and solution was found and worked the first time. Then I switched as it seemed like my code was getting too complicated. I found an explanation of styling using a ListView.ItemTemplate. That is amazing how easy that is in XAML, so I deleted all of my C# code related to ListViewItems.

Now that my search results look beautiful, I need to figure out how to allow multiple selection, since the scrolling automatically works with the ListView as I don't have to deal with that nastiness. The only tricky part was figuring out how to deal with multiple selections in the SelectionChange handler.  The ListView has a SelectedItems property which is a collection of IList

I had time to look a one last filter bug and squished that with some effort. I have been neglecting that one for a long time. That leaves one final bug that will just have to sit there so a while as I have run out of time and money to work on this project so I have to make one final tag in the GitHub repo and then make one final release build to give to the customer next week in my last visit.

Happy ending to a Friday!