Wireframe Android and iOS Apps with Excel!
Why would anyone create mobile app interfaces in Excel? … Well, that’s what I do … tell ya why.
I want my apps to be accepted, approved and downloaded.
User acceptance is often the hardest thing to get right. Wireframes or prototypes are a great way to get users to try an app before committing to a design and rendering that design in code (the act of converting the design into software code). A wireframe can alert a team to a problem early, when changes are easy. At the same time, stakeholders need to approve the app before it’s released. And if testers are excited with the wireframe, the final app will get downloaded, liked and tweetted. So wireframing is a way to get approval and acceptance before the coding starts.
But most wireframe tools are cumbersome. They require that everyone has the wireframe software installed. But not with Excel. Most people have that already. And Excel has all the graphic user interface tools already – checkboxes, pop-up menus, buttons and a way to display the app prototype. It’s all there, an already installed platform to test, try and talk about your developing app.
Look at this REAL app example (or watch the video here). Here we see my app wireframe in Excel. This is the iPhone home screen. But we have more than just a pretty picture. Press the app icon (right side, second icon down in the screen shot) and Excel causes the screen to change …
… like this …
Tapping the app icon simulates launching the app. Excel changes the screen just like the real app would. Now the screen shows the app view. Yes, Excel enables user experience (UX) by way of buttons, menus, checkboxes and other iPhone native controls. In other words, Excel has the functions, features and controls to create the full UI/UX so that the app can be modeled before development.
This is called Model Driven Architecture (MDA) or Model Driven Design (MDD). Both of these are the idea of letting end users write a model of the software before you write the real application. Let’s see how that works.
Here we have a real app that I created. It is a little T-Shirt quoting app. The goal was to let T-Shirt printers be able to quote a T-Shirt print job from their phone.
The left screen shot shows you the app calculating the total price of the job and the per shirt cost. All basic math stuff that you’d expect Excel to be good at. But the right screen shots show you Excel’s controls for pop-up menus and check boxes. All the features that allow user to feel the user interaction and user experience of the app. At this early stage the app is taking shape and testers, stakeholders and end users can run the app and comment on the user interface, functionality and the user experience.
The real power of Excel for modeling are the TABs. Our T-Shirt app has the user interface on one tab, the equations and data on separate tabs. Thus, UI developers can focus on the interface tab. Business stake holders and subject matter experts can focus on the data and equations tab.
Here you see the data that the app uses to calculate the T-Shirt quotes. Because the data is on an Excel tab, it is not obscured in C or Java code. All members of the team can see that data and equations that are used. Even non-technical stake holders can see the transparency (no pun intended) in the wireframe.
When all team members can understand what is happening in a business app, the whole them has confidence that the app will reflect the business logic and business benefits. That confidence allows for a test standard the app can be tested against. Confidence, and a reliable test helps the app get corporate approval faster.
But that’s not all Excel can prototype.
Web, desktop and tablet apps that access the cloud can be prototyped in Excel with live data because of Excel’s ability to get real-time data from the web.
Here I have a model of a stock quoting app. I have both the laptop and iPad version on screen to see the interface.
Because Excel can get data from the web, the model is updated in real time and I don’t need to write any code to test the app. That is, Excel provides methods to get data from a website. As long as the site feeds data to a webpage, I can get and update the HTML stream into my wireframe. No major coding needed.
This speeds prototyping and testing. Once the user interface is accepted, I can then code out the app in iOS or Java for Android. I know what the final design needs to look and work like. Model Driven Architecture and Model Driven Design allow a team to sign off on an application design. THEN the coder can code it out. This mean no surprises. The developers (like me) have a clear model to target. Testers have a benchmark to compare the final application to. And all stake holder know when the final application is ready for release.
MDA and MDD are one of the best ways to develop an application with many stakeholders.
Agile relies on incremental development, but these project can fail when you have too many stakeholders. This is because few can see how each step will lead to desired product. And SDLC or waterfall is slow because of all the up-front documentation needed. Models that are quick to develop, allow all stakeholders to agree on a vision and a design. And they can make that decision faster with simple modeling or wireframing tools.
And what could be simpler than Excel. Most stakeholders know how to use it now (no wirerame tool training needed). Excel has the interaction tools that make it better than Photoshop mock-ups. And Excel files can be emailed to remote team members. But best of all, models in Excel give developers a way to target final development that is well defined. If the team approves the model, developers just need to code-out the model in the new target language.
I developed my Excel Modeling Kit when working at Proquest, UnitedHealth and the Ford Motor Company in Dearborn Michigan.
If you’d like a copy of my kit, with training videos – it is available for download with a link at the bottom of this page.
If you want some help creating your next application in Excel, please contact me – [email protected].
P.S. I’ve even written software to convert Excel models to real webapps that can run on iPhone and Android mobile devices. That means that Excel can be used to actually DEVELOP the app from concept, to model, to final web app. Try that with any other wireframe tool!
Contact me for available training dates for live or onsite training.