Tag Archives: mobile

Session Notes: UX design for every screen [Drupalcon 2012]

Posted on by
Reply

Presenter: Aaron Stanush, Four Kitchens

How 4kitchens has been doing websites for the past decade:

  • Requirements and planning
  • Site maps, user flows, wireframes
  • Comps
  • Implementation

The new way:

  • Requirements/planning
  • Content strategy (mobile first!)
  • Design systems > Comps
    • You can’t spend time doing comps for every single device anymore; it’s not an effective use of your time.
  • Prototyping is KEY
    • You can leverage design systems within prototypes to enhance the mobile experience.
  • Build. Design. Iterate. Design. Build. Iterate.

Major changes:

  • There is no more “page”
    • Layout/template are consistent across devices
  • Comps are no longer golden
    • Don’t need one for every single page/screen
  • Elements are no longer static—they adapt to different devices
  • Prototyping happens much earlier in the process
    • Helps define the vision; helps client get it sooner
  • Designer and developers working closer together
  • Higher level of client communication
    • Some clients are skeptical, think there’s too much risk involved.

THE PLAN:

  • Future-friendly
    • http://futurefriend.ly
    • We don’t know what will be on the market 2–3 years from now;
    • want to provide advice and design that’s going to be sustainable.
  • Mobile-first
    • Luke W’s book: Mobile first (available on A Book Apart)
    • Focus on three things:
      • Growth = opportunity
      • Constraints = focus
        • Screens have different sizes, different needs
      • Capabilities = innovation
        • Tap the capabilities of the phone—GPS, location, etc.
    • “Designing the mobile app first forced us to strip down to the essentials”—Bill DeRouchey, Banksimple
      • Focusing on app first carried the focus of the project into the rest of the experience
  • User-first is content-first; THEN you worry about mobile strategy.

“Mobile Web”

  • Most clients seem to think folks are on mobile devices “on the go”—grocery store, bus stop, etc.
  • But honestly, that’s not true; people are spending more time on their phones, more time on the site through that medium
  • Mark Boulton: “Start designing from the content out, rather than the canvas in.”

Future friendly content

  • What are the types of content and why?
    • Video?
    • Text?
    • How will it be broken up?
  • Make it modular
    • Drupal makes this easy; you can leverage fields, etc.
  • What’s really important?
    • If something goes away, will users care?
    • If something gets smaller, will that change/decrease value?
  • How will the tool you’re using organize this stuff?
    • Drupal gives you flexibility to organize content in multiple ways.
  • Page tables give hierarchies
    • Title
    • Message
    • Secondary Messages
  • Design strategy
    • Workflows aim for best user experience; focus on task/behavior, not layout
      • Responsive is about providing the best experience, particularly when you focus on content.
      • These experiences can differ between devices; desktop may contain more information; mobile can contain more FOCUSED content.
    • Wireframes can help organize layout and convey content flow
      • Still needed
      • Focus on content, flow
    • Design systems save time, create patterns
      • Styletil.es (@samanthatoy)
        • Using texture, fonts, etc. to capture feeling
      • Build style guides/pattern libraries
      • Comps are probably still needed, but not for every page in every viewport.
        • ICANN: Created 3 comps, for 3 different viewports, AFTER creating and iterating style tiles.
      • Goal: get the design to the browser QUICKLY.
    • Prototypes help the team fail faster, to facilitate better solutions.
      • Provide client value; help them “get it” sooner.
      • We’re focused on much more complex problems now.
      • Clients can get really focused on comps; the browser is where the responsive magic really happens.
      • A “living” design allows richer convos between devs and designers.
        • Developers can talk about content flow and other design decisions
        • Designers have to understand more about how things will actually be built.
      • Fail fast. SUCCEED fast.
        • Agile/Lean
        • All about iteration and letting the team direct changes.
  • Best practices = Best experience
    • Not about convention; it’s about creating the best experience for users.
    • mobilewebbestpractices.com—library of best practices for mobile devices
    • Understand how people use their devices and why
    • Content > navigation
      • Users on mobile are generally coming in through a link; they don’t necessarily care about navigation.
    • Best experience doesn’t necessarily mean limiting choices
      • Stripping the experience down to just links/text isn’t the best experience
      • Users spend more time on their phones than you think; particularly reading.
    • Maintain clarity and focus
  • What makes a good experience?
    • Readable (font size, spacing, contrast)
    • Relevant (most valuable content first)
    • Keep forms to a minimum unless you’re dealing with commerce, surveys, etc.
    • Avoid modal overlays (lightbox, ads, etc.)
    • Make it snappy
      • People want to do stuff, and they want to do it fast
      • Performance management (reduce the amount of time for loading)
      • Get people to the content quickly
  • Layout
    • Design for screens, not devices = Breakpoints
      • You really can’t focus just on iPhones anymore; Android, Windows phone, etc. is growing
    • Be fluid, liquid, flexible
      • Think in proportions, NOT pixels
        • aligns with content strategy; focus on hierarchy
        • aids in fluid grid management
      • Think scale in media, text, images
    • Consider device orientation
    • lukew.com/ff/entry.asp?1514: Looked at a bunch of different mobile-to-desktop layouts; identified patterns for responsive layouts
    • Navigation
      • Starbucks changed their navigation; took a risk on an icon-only navigation with drop down box.
      • Don’t try to make drop downs a work of art; the OS takes care of things in their own way.
      • Put fixed toolbars at the top rather than the bottom.
        • The bottom is where the OS puts its hardware buttons; you don’t want users accidentally clicking the hardware buttons.
      • Consider OS and hardware buttons.
    • Responsive Images
      • How do your images scale for various widths and orientations?
      • Reduce the # of images if you can.
        • Not everyone has super-fast phones!
      • Be careful of using HUGE images
    • Mobile text
      • Make it readable
      • Consider text flow; long headlines might not scale well on smaller viewports
      • Be aware of typeface characteristics
        • Tall, skinny?
        • Short, fat?
        • Test performance with mobile devices; make sure that loading fonts isn’t slowing things down
    • Gestures
      • Buttons are a hack: they’re basically styled links.
        • globalmoxie.com/blog/buttons-inspired-ui-hack.shtml
      • Make gestures obvious.
        • Don’t make your users read a manual
        • There’s no such thing as “hover” on a touch site.
      • Do use visual cues like coach marks.
      • There is a need for universal conventions
        • Current conventions: tap and swipe (pull down?)
        • Consider competing OS/Browser gestures
        • Provide alternatives to gestures
          • All devices aren’t yet touch-enabled
      • Design for humans; embrace the physicality of touch
      • Size elements and space them appropriately
        • rule of thumb: size touch elements at about 40px
        • Remember: not every device is touch-enabled
    • Tools
      • Software isn’t necessarily the answer
      • Start with pen and paper
      • Fluid grids
        • Goldengridsystem.com
        • Github.com/davatron5000/Foldy960
        • csswizardry.com/fluid-grids
        • gridsetapp.com (coming soon from Mark Boulton)
      • Wireframing/prototyping
        • Whiteboard!
        • Pen/Paper
        • Axure
        • Balsamiq
        • Boston Globe used InDesign
          • handles both images and text
          • Can create patterns with paragraph/character styles
      • Responsive media
        • Images
        • Slideshows
        • Videos (fitvidjs.com—takes any embedded video and scales proportionately)
        • Text (fittextjs.com)
        • filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
        • markboulton.co.uk/journal/comments/responsive-advertising
      • Media queries
        • @media screen and (max-device-width: 480px) { .column { float: none; }}
        • Media type: screen (desktop, phone, tablet)
        • Query for media feature: width, height, orientation, pixel density
      • Prototype frameworks
        • foundation.zurb.com
        • twitter.github.com/bootstrap
        • goldilocksapproach.com
        • html5boilerplate.com/mobile
      • Touch frameworks
        • jquerymobile.com: can create something that looks like an iPhone app within a browser
        • sencha.com
      • Test on REAL DEVICES
        • blackberry
        • Windows phone
        • Kindle fire, iPad2
        • Galaxy tab, etc.
      • Adobe Shadow: labs.adobe.com/technologies/shadow
        • Runs in the background, and has an extension on FF/Chrome
        • Make sure your devices are on the same wifi network; then you can browse on desktop and it shows up on all your devices.
      • Browserstack.com
        • will emulate any number of browsers inside one website
        • Just started adding mobile VMs.
          • Won’t get the same fidelity as an actual device, but you can get a general overview
        • Subscription is pretty cheap.
      • Blaze.io/mobile
        • tests mobile performance
        • Gives load time and other factors
      • mattkersley.com/responsive
        • Type in different websites, and it’ll show you how it looks in different browser widths.

Session Notes: Native Mobile Application Development on Drupal [Drupalcon 2012]

Posted on by
Reply

Presenter: Kyle Browning, Workhabit

Why NOT native?

  • Options like Titanium/Appcelerator support multiple devices
  • Rapid prototyping: it’s easier to write JS than to do a bunch of memory management stuff
  • Native is not easy for development.

WHY native

  • Faster performance on the device
  • supported by the OS maker (can make support requests on iOS/Android forums)
  • Manage errors on the side of the stack
  • No waiting on API updates, release schedule
  • Game development
  • Personal prefs

Dev process

  • Start with getting your idea on paper.
    • Getting the idea on paper helps the entire process go more smoothly
  • Build wireframes/prototype
    • It’s easier to fail in wireframes and prototyping
    • Gather all the types of content you’ll be using
    • Lay out the app in a workflow (user flows, task maps)
    • Use tools like Briefs, Omnigraffle, Axure
    • Save time on development by failing early and learning as you go
  • Design (visual, UI)
    • WIll it need to support multiple devices?
    • What are the key tasks and how will those be called out
    • Attempt to create an experience users are familiar with: colors, taxonomy menu, etc.
  • Development
    • Figure out what features are pre-reqs for others
      • Will content come in as feeds? First build content, then feeds or vice versa
    • Build API communication file
    • If things are constantly changing, write unit tests
    • Tackle the larger, harder problems FIRST

Mobile stack

  • Mobile App
  • Services
    • Standardized solution to integrate external apps with Drupal
    • Service callbacks can be used with multiple interfaces like REST, XMLRPC, JSON, JSONP, JSON-RPC, SOAP, AMF, etc.
    • Gives you your connection into Drupal
    • Much time is spent messing around with Services
    • Servers
      • Defines Accept and Response types
      • Call Authentication Methods
      • Executes the actual function call
    • Authentication
      • Session based
      • OAuth both 2-legged and 3-legged
      • Singletons: You’ll have a user object that exists through the entire app; you want to make sure that only that object exists. Singletons help with that.
      • No need to re-login to the app when it opens.
    • Endpoints
      • A URL that a mobile app will hit
      • The bread and butter of Services
      • It’s a configuration object that has all the resources and servers/auth methods, etc. that you need to make Services work.
      • You can also work with versioning, access controls for new developers, etc.
    • Versioning
      • Helps keep things consistent
      • Won’t break apps when you build new features or functionality
    • Things to note:
      • Services Views is a bit wonky, but it works
      • There is potential to break if you change Views
      • Features allows you to take the View and put it into code so that it can’t be messed with.
      • Adding images inline within content
        • Services will insert unnecessary HTML tags instead of images
        • Working on a module that will strip out images and attach them as a file to the node
        • Use Imagecache to deal with image handling (it’s already in D7 Core)
    • Tools
      • Drupal iOS SDK and Dandy
        • Sits between Services and the mobile app so you can communicate with Drupal natively
        • Helps do user/session management
      • Services Log
        • hooks into services and logs everything that Services is doing.
        • You can see when you’re getting a 403, etc.—what is messing up and why?
    • Drupal
      • Holds and organizes content
      • Can be sent to mobile app through Services