Cameron Banga

Anyone who stumbles upon this post, see my answer here!

https://coderanch.com/t/638112/Android/Mobile/mobile-interaction-web-sites-tools

Great question! I've actually put together a list which is available with URLs to each tool on the book site here - http://cameronbanga.com/EMIDbook/chapters/appendixes.html

In the book, an entire appendix is dedicated to why I think each tool is great, along with some alternatives for Windows/Mac specific tools. So for further reading, this is my recommended tool list!

Sorry for the delayed response everyone, but I'm going to follow up with a similar "it depends."

In my opinion, the word "responsive" has become an unfortunate buzzword, often overused by stakeholders working with developers/designers in the creation of web/mobile app.

There are tons of situations where in mobile web UI development (or even in Android layout XML files, or iOS autolayout files), where it's pretty simple to use some responsive design principles to develop a great UI that works between a variety of screen sizes. And when possible, I whole heartedly endorse doing this over building exclusive UI files/outputs on a per device/OS basis.

This being said, there are a lot of times where this isn't the case, and responsive designs become an absolute mess. I really don't know of a great way to point these out, other than they'll often feel like a bandaid solution very quickly into thew development/design process. It'll feel _bad_ and confusing. Once you start building a responsive design and you get this feeling, my recommendation is to abandon ship immediately and look into designs built specifically for a device/platform/screen size.

The Design of Everyday Things is an amazing book, recommend it heavily to anyone who comes across it!

Not many code examples, mostly because we try to tackle a handful of platforms in general, and the code would be useless unless written in a handful of languages.

In lieu of that though, we do include many photos/screenshots/visual examples of what we're discussing, with guidance on how to achieve them on various platforms.

Hey Suchira!

Thanks for the question, it's a tough one. It'd be a bit lengthy to explain in depth, so going to do my best to discuss as simple as possible.

For web applications, we're usually designing with the following expectations in mind. That our user will be using a large screen (12-30 inches), while interacting with the site using a keyboard and mouse.

On a phone or tablet, we expect the user to be using a much much smaller device, likely with a screen 3-10 inch screen, and for interaction to be done completely with the user's fingers.


This leads to many different design patterns, mostly caused by the different interaction method. But should give you an idea on the overall guiding principle for the differences.

Thanks for noticing the 5-star. We were proud too. :-)

As for responsive/mobile first. It's discussed in a bit of detail, though we mostly discuss the mobile aspect. There's very little that would be applicable for designing a responsive site, mostly because there are many other books that would do a much, much better job than I would on tackling that task. That's a topic deserving of a handful of books by itself. And unfortunately, AW wanted to limit me to 300 pages. :-)

I would say the target audience would be people who are beginning to moderate mobile developers. The book focuses probably primarily on Android, iPhone, and mobile web design, but is applicable for any sort of phone or tablet platform.

If you're a beginner, it would be a great book to get started with. The book assumes little to no prior knowledge in designing interface for phones and tablets.

@Hendo,

Next time you're out at a meetup/conference/coffee shop with someone who may use one of your apps, give them your phone to test it out. And while they use your app, don't lead with questions or interrupt them, but instead watch and observe as the person navigates around your work. How do they hold the phone in their hand? Do they make direct, purpose driven touches? Do they appear lost?

If you do ask questions, ask open ended but important thoughts like:

* How do you get to feature X?
* Is it clear to you as to what you should do next?
* Do you understand how to go backwards/forwards?
* If you felt lost or confused in this app, what would you do?

Often leads to great feedback!

Hey Bear, thanks for the question!

Definitely not just native mobile, but mobile web as well. We discuss a bit about the differences between web and native apps in the book, and a lot of our examples are iOS/Android tailored, but the content inside definitely has use for mobile web developers as well. That was the entire goal of the book actually, to write something that wouldn't be constrained to a single platform, and that would instead be useful to anyone, regardless as to where they are working.

Great question here.

To simply put it, our book is most different, in my opinion having read many, because we focus on mobile in general with respect to building. So we discuss and focus on the paradigm change between moving from the web/desktop computers to mobile, rather than focusing on a specific platform. Most books tackle either Android or iPhone, but rarely both. We discuss nearly everything in a way that makes the lessons valuable irregardless as to if you're programming on Android or iPhone, or even Windows Phone, Blackberry, the mobile web, etc.

Our goal isn't necessarily to make you think about building better Android designs (although you will get better at Android designs), but to help you think more critically about why pieces of interface should be placed in specific ways. iPhone and Android are the two platforms we most specifically get into detail on, but anything you learn in the book should be relevant for any phone/tablet platform you need to build for, now or in the future.

Hey Mike!

Good question. We talk about UI/UX v interaction a bit in the book, but to many readers/writers, then tend to meld into more or less the same thing.

I typically describe it as this. UI/UX tends to focus more on how to make things look great. How to create great buttons, match colors, meeting design specifications for a specific platform, etc. If you were building a house, UI/UX would be lessons on how to best pick out the perfect paint color, where to place wall art, which couches/tables go best in your house, etc.

Interaction design focuses a bit more specifically on why we choose buttons/sliders, etc, vs other interface components. Again, going to our house reference, it would be why we use certain building materials, why we place walls so far away from each other, use specific doorways, etc.

I recommend that programmers learn as much about all of these fields as possible, mostly because it's a fairly easy way to differentiate yourself and make your work more valuable. As people jump onto the mobile bandwagon, it's increasingly popular for people who can code to jump onto these platforms, but it's very hard to find someone who can code and build attractive UI. And it's not that difficult to learn, just pick up a couple books like mine and you'll know much more than most pretty quick.

Hey John,

I got started through my own studio I co-founded back in 2009/2010. As we got going, it became quickly clear that I was by no means the best programmer in our small group of two. In fact, I'm lucky to be able to read StackOverflow or a forum like this and follow the Java/Obj-C enough to get what I need done. Programming was just never my forte, unfortunately.

However as we got going, I started to learn about the field of interface and interaction design, and it intrigued me so much. I started to learn that designing an interface wasn't just about creating pretty pixels, but instead about figuring out how and why buttons/text/views should be placed on screen. I've always been a science/math minded person, and it was extremely interesting to learn that there are great principles in play as to why operating systems have design guidelines, and why content should be displayed to a user in a specific way.

The book that kinda inspired me into writing on the field was The Humane Interface by Jef Raskin (http://en.wikipedia.org/wiki/The_Humane_Interface), which was also published by Addison Wesley (imagine my excitement to know we'd have books through the same publisher). For those who don't know, Raskin was considered to be the father of the original Macintosh before Jobs kicked him off of the project. He then went on to work on the Canon Cat, and many of his ideas on interface and interaction have become common place in computing today.

Jef was really my biggest inspiration as to why I should write about this stuff. My background is in economics, everything computing/design has been self-taught. So I had the fortunate circumstance of having gone through a college path where I had to frequently write and explain complex systems, so the idea of writing technical books on interface seemed fun.

But as for why I did interaction/UI work, I've just found it as fun. I've always been into computers, so this has been my way to make a career out of them!

Hey there Hendo,

Follow up if I'm wrong, but assuming here that you're talking about with respect to placing your interface, you fall from top to bottom, with what you feel is most important. That's a great starting strategy, for the most part.

Building a UI does require you to think about the psychology and mind of your user a little bit. Think of your interface like reading a concert poster or website. Where do your eyes focus first? Typically, if you're an english speaker/reader, you're going to focus on the top left of the screen first. It just makes sense to draw your focus there first, and then scroll right/down the screen. So you're doing good with this strategy. But it is important to remember that this may not always be the case. Some languages like Arabic go from right-to-left when writing out, so users who work in that language may be confused initially by your design. So it's important to consider your potential user base and what they will expect (we have a great chapter in our book on this).

But in mobile, it's not just reading/visuals that matter when creating UI, but touch and feel as well. Commonly, you'll see important interface buttons toward the bottom of the screen. On iOS, the home button and tab bar UIs all lay upon the bottom of the screen. On Android, you'll find the software (and increasingly less common hardware) home/back/menu huttons anchored to the bottom of the screen. Why? Because they're easiest to reach with your thumb when holding a device in a single hand.

So think about how your app, and the different parts of your interface, will be used frequently. We talk in the book about metrics and seeing how users respond to your app, and this is where this becomes key. You can see it frequently in Google's recent I/O talks on material design, as it's common to see important UI buttons hovering over the bottom right of a view/screen for easy reach/interaction. If you see a similar function for your app's UI, feel free to try it!

Great question. I'll answer the best I can here, but feel free to follow up if it doesn't help.

Android's design strategy is great for tackling multiple size screens, as you can customize as much as you're able to, in order to provide the most customized and optimal experience for your users.

Typically, your interface files will be created as XML layout files in your resources directory. I'm attaching an image here from an Android app I'm working on today:



Here, I'm just getting started on Android tablet support. So I have our standard layout xml files, in default directory. I've then created two other directories to keep layout xml files as well, layout-sw600dp and layout-sw720dp. The first directory here will be referenced for devices larger than 600dp in width. The second folder will take over once the app needs to render it's interface on a screen 720dp or higher.

As you can see, we'll name the file the same and have it in the individual directories. So I can optimize my layout here for larger 600dp (think Nexus 7, smaller tablets), and very large 720dp+ (Nexus 10 like) devices.

For more info, see this great link! http://developer.android.com/training/multiscreen/screensizes.html