Interface design is a two-person dance. By definition it connects two things—the customer experience and the hidden machinery. As a designer, you need a programmer to accomplish anything significant.
I’ve been thinking a lot about teaching UI lately. How do you teach interface design if you can’t get anything done without a programmer at your side? Pair beginner programmers with beginner designers? Sounds like a mess.
Then I remembered my own experience. When I started making interfaces in sixth grade, I didn’t need a programmer because I had Hypercard. Shortly after that it was Filemaker and Microsoft Access. These tools let me connect with data and display it in different ways without convincing a programmer to work with me. It was plenty to learn the fundamentals.
I haven’t seen a UI course that starts with a tool like Filemaker. And Hypercard doesn’t even exist anymore.
If I was designing an introductory interface design course, I think I would start with this kind of tool. Something that lets you gain the experience of putting affordances on the screen, accepting input and displaying output, moving around and enabling tasks.
That way students could get a feel for interfaces without getting into the complicated dance of communication, programmer languages and shared requirements. That all can come later.
Rob Colburn
on 14 Dec 12How about Keynote?
http://www.lukew.com/ff/entry.asp?1155 http://www.lukew.com/ff/entry.asp?1171
Walter
on 14 Dec 12I have seen a number of posts lately about using Keynote as a design/interaction prototyping tool. Its controls may not be as refined as what you could create with CSS and Photoshop, but it provides a way to link up interfaces that can be navigated (and animated transitions, too) and provides a useful stepping stone while working out the flow of screens.
Ryan
on 14 Dec 12Keynote allows you to mock interactions, but you can’t do anything real with it. It won’t save and redisplay data. Filemaker will do that. You can make a real contact management app in Filemaker, for example. That’s the kind of thing I did when I was a kid.
(Actually it was ClarisWorks. But same thing, I think.)
Steve
on 14 Dec 12HyperStudio was a me-too app during the heyday of HyperCard.
http://www.mackiev.com/hyperstudio/index.html
Justin
on 14 Dec 12I learned user interface design on Hypercard too! Though back then I called it “making my project pretty and easy for my teacher to use.” “User interface design” is shorter.
Andrew Wicklander
on 14 Dec 12I’ve found prototyping with tools like Formstack (no affiliation) to be particularly valuable because they allow you to show and hide data.
You’re still limited of course, but they allow you to begin making things real quite easily and very quickly.
Reinier Ladan
on 14 Dec 12A bit of programming doesn’t hurt you when you’re learning to design. An architect should know about wood, steel and concrete.
I made my first steps designing in Macromedia Director. You could get a lot of things done with a bit knowledge of the Lingo language.
Why not teach a bit of HTML/CSS/JS? Use frameworks, jquery and local storage for example. Seems like the easiest way nowadays to get some interaction going and being useful when doing ‘the real thing’.
Ryan
on 14 Dec 12Reinier—I’m very sympathetic to the idea of learning programming. However I don’t think I could have gotten my 12-year-old self to put off the visual interactive stuff and learn programming first out of discipline. It seems important to offer ways to play with interface elements straight away.
Mig
on 14 Dec 12Dancing without a partner, starting a movement.
Dan Sauvé
on 14 Dec 12Tools such as Axure and Justinmind Prototyper might be a good fit. As a UX Architect I use Axure from time to time when prototyping new features and functionality for usability testing, and I’ve worked closely with UX Designers who use it daily to mock-up interfaces.
I find that these tools also help me think through “what if” situations. Since I can use conditional logic to mock-up different interactions with these tools it gets me thinking a little bit like a programmer, with the benefit of not having to actually, you know, code anything. :)
Brett
on 14 Dec 12I think the same concept holds true for teaching almost anything – give the students something cool they can accomplish quickly and easily right off the bat. That will get them excited about the possibilities and confident in their ability to learn how to do this.
A lot of old-schoolers like to blast students with the most tedious and difficult portions of the subject matter right away, almost as a right of passage the student has to endure to become ‘part of the club’. It feels overwhelming and discouraging to the student to plow through piles and piles of complex materials and barely have anything tangible they can accomplish to show for their efforts.
For instance, if you’re teaching javascript, let em start with jQuery. Let em see how a few lines of code can make things move around and change size and become interactive. Once they see they can do this, they’ll want to dig deeper and deeper into it. Eventually they’ll learn the nitty gritty details of javascript, but in the beginning, give em some confidence and let them see that learning javascript might be a lot of fun, not a laborious grind.
Daniel
on 14 Dec 12If you had something that allows you to create a UI that would be tied to a database without having to actually write code, it would not only be useful in a Design course, it would also make programming irrelevant.
Jason
on 14 Dec 12Ha! We still use Filemaker where I work. Don’t laugh…
Alex
on 14 Dec 12There are some clones available, e.g. http://supercard.us/
Have a look here for some more: http://hypercard.org/
(Note that I haven’t used any of these myself, but have much nostalgia for hypercard!)
Jake Johnson
on 14 Dec 12Since I began creating a web interface design tool (“The Interface Builder for Web Apps”) last April I’ve noticed a huge number of students and aspiring UI designers interested in the product. It allows them to quickly drag and drop common UI components around without understanding a single line of HTML or CSS. They can export their interface to clean code to see how it was built. Now I’m taking it a step further and building a real-time, instant visual feedback IDE that blends WYSIWYG and code. This could help UI designers and front-end developers learn how to build web interfaces much faster. They can actually see what they’re building in an easy and intuitive way, reminiscent of something like Visual Studio or Dreamweaver but with quality code that encourages best practices.
There’s still plenty of work to be done when it comes to data and handling interaction. Keynote and mockup tools like Axure are great but for responsive web apps it’s much more effective to create prototypes with actual code so you can visualize how it will work on multiple devices.
Ryan
on 14 Dec 12Those tools for making mockups and prototypes are cool, but for me they are not interesting. A mockup is boring because it doesn’t do anything. For somebody learning UI there’s no payoff in clicking around a mockup. The payoff is clicking around and watching your app do something.
Tools like Filemaker are in a totally different class from these mockup tools because you can actually do something in the app. That point is critical.
Brian
on 15 Dec 12Ryan, there are a couple key things about the tool you learned with:
1) It didn’t require you to know a programming language in order to connect inputs & outputs to data. Understanding low-level things, while helpful, shouldn’t be required to create.
2) The resulting output of the tool was something you could actually use. It wasn’t a static image or a prototype that needed to be translated into something else in order to become the final product.
I started out dancing without a partner (both designing and developing), but as web development increased in complexity, I’m back with a developer partner. It seems like the innovations in code have only increased the number of libraries & frameworks to choose from. They haven’t been able to abstract things to the point that you don’t have to write code.
I’m still looking for the tool that allows me to create high quality software (both functionally and aesthetically) for various devices without needing to write code, in the same way I can create a beautiful book in iPhoto without needing to know how to operate a printing press and book binding tools.
Ryan
on 15 Dec 12Thanks Brian. Those two points nail it exactly.
I’m happy to work with programmers now. They can do amazing things – far more than any appliance-style tool.
I think that those two criteria you mentioned are key at the low end, for people learning UI design for the first time and amateurs scratching their own itch. At the pro end, we do our best to approximate the experience of a personal feedback loop by keeping designers and devs very close together on the same code base.
Anonymous Coward
on 15 Dec 12Im teaching my interns about UI too and axure is really a good choice. I spend 1-2h with any new kid and they can pickup the tool doing their own thing after that. Axure basically in their eyes is just a different version of ms word. And everyone is already familiar with it
Christopher H.
on 15 Dec 12I think that XCode Storyboards are good tools to help teach the basics of iPhone / iPad UI Design. You can drag and drop items onto each scene and connect them with various transitions. It’s also good to teach how tab bars and navigation controllers work. What you can do without writing any code is limited though.
Hrishi
on 15 Dec 12Ryan, I’ve been thinking about making a tool like this. Your post pushed me to give it a go.
I’ve just put up a form here for anyone who might be interested in trying it out and giving me some feedback – https://docs.google.com/spreadsheet/viewform?formkey=dHdvOVdabHF2QTVEalpNSXlneHNYZWc6MQ
Thanks!
Hrishi
on 15 Dec 12Just noticed HTML is allowed. Here’s a clickable link.
Tiago Simões
on 15 Dec 12I tottaly agree, I’ve also learned to create UIs with Access and it was great a the time! Today, the Agile Platform is also a great way to learn to create user interfaces that connect to a database. It is targeted mostly at large IT departments, but there is a free edition that allows anyone to create an application with little development knowledge.
Max
on 15 Dec 12Try divshot.com. It’s truly great tool.
Dave
on 15 Dec 12Ryan…
Thanks for bringing back memories… Hypercard was my initial dive into programming and while some folks were making recipe stacks… I built a little Canadian Payroll stack… all because someone said that real business apps couldn’t be built with a Mac or Hypercard. And I wasn’t a programmer at that point, I was just a guy fresh out of high school who needed to cut some cheques (checks) to a couple of guys that worked for me. And then I showed it to a couple of others who ended up buying and using it for themselves, and so on and so on….
And the funny part is that my users were mid 80’s non-computer savvy people who told me they liked it way better spreadsheet apps back because it was “easy to use” and they didn’t need to be a spreadsheet 123 guru just to calculate a few numbers and they could just “use it”.
Usability mattered even way back then!
Brian
on 15 Dec 12That’s a cool idea, Ryan. When I was learning database design I ran into a similar question: whether I should use a UI-style tool like Access or learn SQL + MySQL, Oracle etc. I chose to take the more technical path, but I have friends/colleagues that used Access and learned a ton. The approach didn’t really matter, the critical part was the person’s intensity and commitment.
There are lots of different paths to learning. What’s important is finding the path that fits your learning style and goals.
Great post, as usual.
Ryan
on 15 Dec 12That’s an inspiring story Dave. Thanks for sharing.
Craig
on 15 Dec 12A commercial graphical programming language, widely used in the scientific, engineering and robotics communities is LabVIEW from National Instruments. The product celebrated the 25th anniversary of its commercial release. There is also a national program linking school kids at various levels to use LabView to create arrays of integrated, real and virtual instruments to carry out laboratory experiments and control Lego-based robots.
Start here: www.ni.com/labview/whatis/
Jason Dudar
on 16 Dec 12We have seen the power of using this approach with our initial group of alpha users for our product Retool
Because users see instant results and create real working applications, they quickly want to learn the more advanced features such as JavaScript coding so they can accomplish even more.
They are willing to invest the time to learn when they are certain of the outcome.
Emil
on 17 Dec 12How much functionality does a tool like this require?
When you compare mockup apps with FileMaker and say that the UI should bli clickable and do something. What should it do? (e.g. to-do list, create, edit, remove, save to a data storage etc?). What’s left for the developer?
Have you guys tried mixture.io? They allow data storage to power your static HTML/CSS which makes it super simple to simulate how a list with 100 items, 1 item and 0 items look. (I’m not from mixture).
AOK
on 17 Dec 12If you’re not allergic to Microsoft, then Expression Blend would be a nice tool for this. You can make complete applications (although simple ones) without seeing any lines of code. The Windows Phone version is free, and the desktop version can be evaluated for two months, I think, so there’s not much of a barrier to start.
Igor Asselbergs
on 17 Dec 12I disagree.
I dropped out of school when I was 18, never went back. What I learned from that experience is that education boxes you into a way of thinking, a way of viewing the world. Everyone lives in his own box, I’m no exception. However, as a result of dropping out, my box is different. So even whithout leaving my own box, I am out of most other people’s boxes. Thinking out of the box doesn’t require any effort on my part. I already am out of most boxes.
Currently I run a software company. I’m technically savvy. I know it wouldn’t take me that much time to learn to code. But I don’t. Because I found that programmers are boxed in. Don’t get me wrong, this is certainly not a bad thing. But as a designer and concept developer, I’d rather think outside the technical box.
I collaborate closely with my coders. But I often come up with solutions that they hadn’t thought about. Not because I’m smarter, but only because I have the freedom to think along other lines. Sure enough, many of my solutions turn out to be impracticle from a coding perspective. But now and again I come up with a solution that allows us to leap forward with a project. The team couldn’t have done it without me.
This is also why I tend to listen closely to people who have no expertise. 99 out of 100 times their comments will be useless. But 1 out of 100 times they come up with a solution that no expert had imagined.
Take Steve Jobs. Apple would not have existed without the technical genius of Steve Wozniak. But it wouldn’t have exisited either without Job’s disregard for technical issues. When a programmer told him something was impossible, he didn’t care. He would expect him to do it anyway, thus creating some of the world’s most succesful products. He didn’t get boxed into the technical realm.
I’ve been around for a while. Already way before the Agile movement started, we worked agile. Because I hadn’t learned anything about coding and Waterfall. My programmers worked Waterfall, because they simply didn’t know any better. That’s what they were taught. They didn’t even view it as a method. It was simply the way things were done. I didn’t view it as a method either. But it went against my common sense and messed up my projects. So I required my programmers to work agile, before Agile even existed. This paid of big time. Just an example of thinking out of the box…
I highly admire 37 Signals and use Basecamp every day. But it is also clear to me that Basecamp will never come out of its box, which is defined by 37s company culture. Which is fine, because both 37 Signals and Basecamp are great as they are. However, I doubt that the next generation of collaboration tools will come out of 37 signals…
Nick
on 17 Dec 12Ryan, you raise a great point. In my early days, I spent a lot of time in early versions of Filemaker building small database ideas. I was neither a database guru or a UI designer (by any stretch of the imagination) but the fluidity of working between a data and presentation layer really opened up my imagination and got me thinking about interaction design.
I use most of the prototyping and mockup tools recommended in this thread and I can’t say any of them represent that fluid experience well. I was brainstorming with some colleagues recently and I suggested that we mock some things out in Filemaker just to get a feel for the idea. Surprisingly, after years of learning about UI design and doing my best to stay on top of a rudimentary command of basic languages I still got that same moment of joy when I flipped from Layout to Browse mode on my prototype.
In fact, the shallow learning curve of Filemaker is what originally inspired me to learn ColdFusion. I didn’t have any inherent interest in becoming a programmer, I just wanted a simple way to connect data to UI to web. Without that instant gratification I would have never pursued more knowledge about programming.
I can’t imagine being 12 years old and having the patience to learn Rails or jQuery. Then again, I did once sit in front of a Commodore 64 for a solid 15K lines.
Patrick Marsceill
on 17 Dec 12Ryan,
Great post and a great discussion going on here. I echo your sentiments of being able to build something real, even early in the design of a project.
Perhaps relying on something to quickly and easily generate a front-end (perhaps a strappy framework with local web-server?) coupled with a lightweight local database could be the solution? I don’t think a “pre-packaged” tool like this exists right now, but I have been using the Serve gem (it’s basically Rails’ templating engine without any backend) coupled with a few other open source tools to solve this very problem…
Patrick
Robbie
on 18 Dec 12Ryan,
Love the thought for today. User interface design is something my firm dabbles in from time to time. It’s by no means a big hitter as far as client needs are concerned, but when we’ve come across these projects we’ve always done extremely well with them. I began to ponder why this was as I read your post, and it has become very clear – we have a development department one door down from our designers. When we build the user experience, the machinery is being built in the very next room. This makes for very easy collaboration, which makes for very happy UI clients!
Thanks for the thoughts on this. I’ll be sure to share this with the office.
This discussion is closed.