case study
LDS Interaction Framework
The Interaction Framework (IxF) is the result of a collaboration between members of the Interaction Design Team in Church’s Information and Communication Systems Department. The goal of IxF is to make development and prototyping faster, to ensure best practices in UI design and ultimately to save sacred tithing funds and make the user experience better for the folks who use our apps. We are excited to formally announce this project and introduce you to some of the work we’ve been involved in.
Simpler Interfaces, Smaller Scope
We intentionally left out some of the kinds of interactions that encourage apps to grow too big. Conventions like modals, drop-menus, and others often lead to intractably large and complex apps. Apps that would be better if they were smaller, and more manageable from a development perspective.
Best UI Practices
This seems obvious, but in reality, it takes a lot more determination than you might think. We simply won’t support every interaction out there. We pick the best way we know of to do something and forget the rest. Later, if we find a new interaction that’s better, we’ll flush the old one with antipathy and move forward.
Performance
Let’s be honest. As technologists, we’re pretty spoiled when it comes to bandwidth. We’ve probably blocked from our minds the painful memories of a 56 k modem. The problem is that even on high bandwidth connections, slow application performance can kill the user experience, no matter how pretty it is. We have and will continue to make speed a top priority in the IxF.
Forward Thinking
We’re looking to the future by supporting emerging standards like mobile/touch access and ARIA for accessibility, etc. We’re also heavily leaning on the latest advances in CSS3 and HTML5 as it makes sense to do so.
Two Styles, A Thousand Flavors
Naturally, we can bend this framework do to whatever we need for various projects, but out of the box, we will only support two fundamental approaches to UI design. We call them “Web Style” and “Desktop Style”
Web Style
Web style is what we’re used to for most apps and makes an appearance in mobile devices like the iPhone. It often means drilling into a page, accomplishing some action and then going back out again. It’s more hierarchical and simplifies apps by giving you only one thing on a screen at a time. It’s a great approach if your app is small or if it will be used by many people who are continuously new to the app.
Desktop Style
Desktop Style allows for a lot more on a page at a time, while keeping it organized and clear. Outlook is an example of this. It uses multiple panes/panels and can show a lot of data at a time.
Desktop style is great for users who don’t mind a little more complexity in return for speed. It also helps maintain context by keeping the user on one screen as much as possible. That said, it also works great for some simple apps as well, like a calendar or address book.
Master/Detail is your Friend
So one of the most helpful things you can provide to a user is context. Master/Detail is a handy pattern for providing this because it’s an “instructive” interface. It allows the user to see a set of data, click on one and see its details while keeping the dataset on the screen. It helps keep the user from being disoriented in any way.
We like this pattern so much, we’ve added significant support for it in the IxF with three patterns we support for data sets: Tables, Lists and the Finder component. All three of these provide hooks for working within the Panel component.
Some of the hooks we added are keyboard (arrow) navigation and built in fetching of data via AJAX to the detail panel of a layout.
Conclusion
We’re excited about the momentum we have behind this project and the success we have already seen internally as it is being implemented. We are also eager for the family of applications that will be arriving soon through new development and re-signing and the usability and research and development benefits it will provide. We intend to keep you posted on our work.