Recommended
Recommended
More Related Content
Similar to Mobile Design in 2014 and Beyond
Similar to Mobile Design in 2014 and Beyond (20)
Recently uploaded
Recently uploaded (20)
Mobile Design in 2014 and Beyond
- 1. Mobile Design in 2014 and Beyond DrupalCamp Toronto
- 2. Kurt Jarchow Web Interactions Designer Freeform Solutions - Professor Durham College @jarchowk
- 3. In this discussion High-level thinking - what does the "web" mean? How are mobile users using it. Designing prep for mobile Design concepts Brush on CMS problems
- 4. Is mobile a ... Revolution? Evolution?
- 5. Take the red pill
- 6. Paper to Web
- 7. A new medium was born. What happened? Old business models broke, new ones created Content was re-written and reorganized New design patterns were created New customer expectations emerged
- 10. A new medium is born, what's happening? Old business models breaking, new ones being created Content being re-written and reorganized New design patterns emerging New customer expectations starting
- 11. Visualizing the mobile web as a stream
- 12. How can we design for mobiles/desktop/tablets? (Watches? TVs??)
- 13. Don't!
- 15. Designing for content Similar to "mobile first" Designer learns content strategy Typography makes a comeback
- 16. Mobile First
- 17. Content Strategy
- 18. Typography
- 19. Designing for single interactions Mobile will have fewer page visits per visit Can you simplify your site? Current web mobile menus are unproven
- 20. Design for change Borrow heavily from Lean UX Be agile Accept design change as hypotheses Measure, and repeat Be lean
- 21. Further reading The Design of Everyday Things - Donald A. Norman Content Strategy for the Web - Kristen Halvorson Mobile First - Luke Wroblewski Lean UX - Jeff Gothelf
- 22. In conclusion... Use what we've learned from old But don't be held back by them Embrace the new medium Experiment with new ideas
Editor's Notes
- Introducing myself, my name is Kurt Jarchow, I'm a web developer at Freeform Solutions, which is a web/Drupal/civicrm shop, focusing in the non profit sector. Freeform works with big clients like Oxfam Canada, Care Canada and Amnesty International, but also try to work with smaller clients in Canada and internationally. I am also a teacher at Durham college, teaching web design and web development.
- Today we'll try and step back and consider what the web means for mobile, and how it is used. Should it still be called the "web"? How does today compare to 1997? Bigger questions like that. We'll also start looking at some mobile web design preparation techniques, some mobile concepts, and brush on some things CMSs will be challenged with for mobile.
- It's important to ask the question: is mobile a simple evolutionary step of the web, or is a revolutionary leap. Is mobile design simply shrinking the current web, or are there more fundamental changes happening. My money is on revolution, but I feel like our industry as a whole hasn't yet accepted, so it's my goal today to convert some of you.
- Essentially I'm asking you to take the red pill. Mobile is the new medium, and it has new rules. -- So, how do we know if we are in the middle of a revolution? What does it feel like? Well, what did the last revolution feel like?
- My first job was working summers at CIBC, and I can remember my first professional project very clearly. It was in 1997, and I was asked to convert a paper-based manual onto to the companies intranet. The task was simple, convert the book in its entirety to electronic format. I was finished the project a little early, and I really wanted to impress the manager, so I made some extra features like search, and a left menu with chapter titles, and things like that. When I showed my manager, he politely asked me to take them out, and asked for the manual to work just like the book. I was 17 at the time, and pretty quiet, but I remember being confused and saying "but this isn't a book, it's a website". I feel like I have these same kinds of discussions, but now with people in technology. We're shifting mediums but we're not quite acknowledging it yet.
- I think it's important to think about how web changed things. Old business models broke: newspapers, magazines, old media, travel agencies, some brick & mortar retail, etc. New : Google, Amazon, ebay, etc. Content for the web is much different. It's not only written differently and more frequently for our new reading habits, but it's optimized for SEO, organized for logical menu structures, and distributed globally, in an instant. We created a lot of new design patterns. We defined what a homepage was for. We added navigation patterns like the main menu, secondary menu, breadcrumbs, tagging, logos go home, etc.). We fined tuned landing pages, we discovered the "F" pattern. We learned to make call-to-actions larger, how to make our forms perform better. What was the end result? New customer expectations emerged. User says things like: "I can't skim your content to read this in the time I have." "You don't have your products online for me compare with your competition." "Your registration form will take longer to fill in than my patience will allow."
- These were changes for this world. Inter-connective, digital information. The imagery of a "web" is still strong. Wikipedia says: a system of interlinked hypertext documents accessed via the internet. But does "web" still give an accurate image of how we use websites? If I watch my wife using her phone, does she follow links? Hardly. Does she even use a browser anymore? When my kids grow will they know what a browser is?
- To consider mobile web as a revolution, I'd like to list what happened to one of the largest technology company when we moved from computer to web, then from web to mobile, because is see relevance here. When Microsoft mis-judged the web, they reacted. They reacted by building and locking in Internet Explorer, building MSN, and by building their own search engine. When Microsoft mis-judged mobile what happened? They reorganized the company, changed business models, redesigned Windows, fired their CEO, and bought Nokia to become a hardware company. I feel like Microsoft was at the epicentre of the mobile earthquake, and we're now standing on the beach waiting for the tsunami to hit us.
- Let's look at that same list from before in today's circumstances. "Old business models are breaking, new ones being created"... It's still very early for mobile, but we've already seen some very significant changes. I've mentioned Microsoft, but there is also Facebook, who are still scrambling to catch back up (including paying huge sums of money to stay relevant). Content being rewritten and organized? Sparsely. We haven't seen enough of this yet, but we will. New design patterns are starting to appear, with adaptive and responsive design. Drop down main menus, swipe gestures, etc... But we are still very much dependant on old design patterns. New customer expectations? Absolutely. People are expecting mobile sites now. And by the way, they want their mobile sites to do everything their desktop sites do. --- So if we had to visualize this new web, as we did with the old web, what would it look like?
- How can we visualize the mobile web as it's actually being used? In my opinion, we need to start looking at the mobile web not as a web, but as a stream. A personalized stream, and each one different for each user. What are the important characteristics of the stream? It's Time-based. It includes many different sources (Facebook, Twitter, Flipboard, etc.) Not accessed from a traditional browser (I saw one stat a weeks ago- 2013, 20% of mobile use was in the browser, 2014, 16%) Personally chosen, customized Social Full of distractions A lot of the thought of the web as a "stream" can actually be attributed to David Gelerter, who is the chief scientist at Yale University, and had a very interesting article in Wired a while back
- So how can we design for this web, for all these different resolutions and ways of accessing our content?
- Design for content, design for single interactions, design for change.
- Similar to "mobile first" Designer learns content strategy Typography makes a comeback
- There is a design methodology out there today, many of you might have heard it, it's called "mobile-first" design. The idea is to, as it's name implies, design for the mobile width first, then modify for the larger displays. I think the process is great, because it's forces you to think small. It forces you to simplify your site. If you make it work for the smallest of displays, it'll then work for the larger ones, by default. Mobile first is all about embracing constraints. Learn to love the small screen.
- Mobile first is great, I think what you're really doing is designing for you content. Before, and I'm guilty of this too, content was the last thing we'd consider when we designed. Essentially we designed the Crome around the content. And CMSs made this easy to do! Design the template once, and let the user worry about the content. But look at mobile screens. There is no room for Crome, the content is the design. This is going to shake thing up in CMS land, I think. Drupal really isn't designed for updating the content, and current wysiwyg really don't cut it. Medium, the sudo-blogging site, excels at one very basic thing, and that it to make it easy for publishers to create content that can tell a story effectively to users.
- Typography is already making a comeback. We're seeing this all over the web. This is part of the design for content we're seeing. You don't have to be a great typographer to make your look like good. There are loads of resources online that can help you get there.
- Design for single interactions. Assume you only get one page per visit. This is really going to depend on the site, but in general, page per visits are fewer for mobile devices. And this is pretty consistent from my personal observations of sites from different industries, and methods of mobile readiness. People on mobile devices are probably not going to take the time to dig through your navigation to find something. This is a really big problem if you have a large site. I've seem some design mockups for mobile devices that had multiple levels of drop down menus. That's madness. So, how do you get a user to where they want to go? The first thing I do is to try and be disciplined with the amount of content on the site. CMSs have made it very easy to create pages, and I know from my experience that there is a lot of pruning that can be done. Can you consolidate some pages together? Do you need all that content? The second I do is to make sure every page on the site has a clear, defined purpose. Not only a purpose, but a measurable goal attached to it. Make sure to give direction to your users on every page. Try to really empathize with the user: why are they on the page? What would they likely want to do next? Don't rely on the menu to do the work for you. That brings me to the third thing I do: remove the menu. And this is the part of the presentation where I'll lose a lot of people. People get angry when I suggest this. To me though, this is the way your user is going to see the site. When we have that menu, hidden in a drop down at the top of the page, I bet 90% won't even notice it's there. Don't worry, we'll put the menu back in! But, as an exercise, navigate to a page, hide the menu, then ask yourself: can the user achieve their goal? An excellent example of this is the new uk.gov site, who after doing an extensive information redesign, decided to remove the menu completely.
- Designing for change is borrowing heavily from the Lean UX discipline, and I doubt I'll contribute anything new to this discussion, but it's important to present the fundamentals. We are experiencing rapid change in the industry, and our designs and processes need to be agile enough to adjust. How can we design in an agile way? Treat every design change as a hypothesis. "The user isn't noticing out buttons. By changing the call-to-actions to a brighter colour, we'll see an increase click-through rates" Decide on a quantifiable Measurement for the change. "Our page views on those pages will increase" Evaluate the results after a decided length of time. Repeat the process. How many times? For as long as you have a website. And when your applying these changes, do so with the least amount of effort. Don't spend a lot of money figuring out if your hypotheses are correct. They might not be. If you can, do user studies.
- So, as we step down the rabbit hole, and let the mobile tsunami wash over us, how can we prevent ourselves from drowning? Use what we've learned from the old web. But! don't keep ourselves chained to the to the old ideas. Understand that this is a new medium, with new rules. This might seem like a tough pill to swallow, but keeping an open mind and challenging old assumptions is the way forward. Thank you all, and enjoy the rest of DrupalCamp