The third edition of Meta Refresh, an annual conference on the construction of the user experience on the web was held at MLR Convention center, Bangalore, India.
Organized by Hasgeek, Previous editions of the event focused on learning the skills necessary to build experiences which cannot possibly exist in any medium apart from the Internet and revisiting the construction of user interfaces for new generation of devices.
This year’s Meta Refresh opened the stage for web designers and developers to present on how their work has advanced the state of the web.
Right at the entrance was a beautiful and welcoming infographic of web technologies and tools.
The attendees included people ranging from design heads, product managers, UI/UX architects to students, which presented a great opportunity to interact with brilliant people in the field of UI/UX.
The team at AnimusIO had brought grid books for sale, probably the best thing to get at a design conference, I immediately picked 3. These things started selling out pretty fast.
Day 1
A Front End Architect’s Diary – Rebuilding Freecharge.in Web Experience
“Trust is everything when you make people pay online”, and to gain that trust the users need to feel confident about what the application is doing.”
The first talk of the day was by Harish Sivaramakrishnan (@harish_io) from Freecharge, his talk was on how they revamped their site to improve performance and customer loyalty, and the challenges and lessons learnt along the way.
Keeping the stack agnostic to the platform, using partials when there are too many templates, having a dependency management and versioning system are some of the things they implemented after learning the hard way.
When it’s an e-commerce site and especially if its a product of an emerging startup, each and every customer matters. If a site is inaccessible on certain platforms, that is loss in a revenue chunk right there. Through this Harish emphasized the importance of supporting a site on as many platforms as possible.
Harish also demoed the new website which had unobtrusive but elegant interactions which made the recharge process effortless.
How Viable Is A Minimum Viable Product?
“Entrepreneurship in a lean startup is a series of MVP’s. Do one thing and do it right”.
Rajesh Bysani (@fartfree) is the Asst. Vice President, Product at FreeCharge.in, his talk was on getting the V in a MVP right.
He made us understand how important it is to test and validate a given idea, see if it has potential market, if its magnetizable, and most importantly why would already comfortable users make a switch to your product.
“Give a solution and see if the customer likes it, he needs to invest in your product.”
He also advised to stick to a vision but not be afraid to change the idea as and when needed and not be stuck onto it. To assess ideas using beta launch feedback, landing pages, google adwords, emails and video mockups.
Rajesh spoke about a time when he built the Redbus UX on powerpoint, which makes us believe his point of not getting stuck with tools and to continue imagining and building with what we can. Targeting a specific segment and hard prioritization is a must.
Repositories Of Cupcakes.
After the amazing breakfast organized by Github, we were offered Github cupcakes 🙂
Books + Browser + On/Offline = Reading Redefined
Amarjeet Singh from Flipkart talked about the challenges faced while making ebook readers. He spoke about the epub format and how it differs from the PDF format.
Amarjeet also explained caching mechanisms and how future pages of the book are pre-loaded to improve the experience for the user.
He also emphasised the importance of not making the user wait for the books and explained mechanisms for managing resources.
BEM
Jaison Justus (@jaisonjustus) gave a small talk on what is the philosophy behind organization and re-usability by BEM methodologies.
The Bubble Cursor
Parthiv Shah, an 11th grade student created an innovative cursor which allowed the user to be far less accurate in navigating using the mouse to get things done.
Bubble cursor is a chrome plugin and can be found here.
This plugin highlights text field on being near vicinity, checks radio buttons/ checkboxes with ease and clicks buttons effortlessly etc.
Web Is Flux
“Unlike an elevator, an escalator can be used even when its not working… Apps should be designed in such a manner”
Souvik Das Gupta (@souvikdg) explained that users don’t use old and dated browsers by choice and its the responsibility of the website to deliver the essential content and not fall back on its promises.
Talking on the subject of progressive enhancement, Souvik proved that ironically the more backward compatible a website is, the more future friendly it becomes.
Websites should be designed in layers, first the HTML for the entire content, CSS then to add some design and styling and finally JS in the end for some functionality and interactivity. If a given browser can’t process any of the top layers, they can still effectively fallback to the previous layers thereby not breaking functionality.
What We Learnt At Ia When Working On Large-scale Design Projects
“Prototype whenever in doubt and stay in structure as long as possible since that’s where UX lies.”
Chris Lüscher (@iAChris), the Co-founder of iA gave a talk on design awareness and how to collaborate with teams and manage projects to get things done.
He emphasized the importance of user research and how most projects are 30% design & 70% is somewhat design too. We need to be fully aware of the project’s context and designs should be aware of its users.
He explained the importance of keeping a balance between inevitable compromises in implementation and the original idea. The importance of implementing modules and flows, not pages.
Day 2
Faster (Coincidentally More Secure) Webfonts
The first talk was by Bram Pitoyo (@brampitoyo), a UX Designer & Typographer at Mozilla. Bram spoke about the issues of using webfonts and how to make them more secure.
To decrease file size and make the font more compact, Bram proposed “sub-setting” which involves removal of unnecessary characters. Also, creating multiple subsets would make the font more secure as it would be difficult to reconstruct all the characters in different subsets in appropriate positions to make the font work.
The fonts can also be embedded to improve performance over the direct linking method and in fact, combining sub-setting and embedding would further boost the performance in certain situations.
Bram also advised to compress the fonts to woff and split to a maximum degree of 2.
Also, even fonts could be made responsive by loading appropriate fonts using media queries.
Bram benchmarked the different permutations possible with splitting, embedding, compression and explained which process to use in different scenarios.
Perceived Web Performance
“Performance is a moving target and has to be followed up continuously.”
Aakash Bapna (@_aakash) from Flipkart spoke about perceived web performance which involves giving the users a “feel” that something is happening at a faster rate, even if it technically isn’t.
Aakash emphasized on the importance of having a good strategy in place to deliver content to the users, and to progressively enhance the page as it loads.
As per his experience, Google Analytics, Redirects, Images and the HTML document itself were some of the performance bottlenecks.
On the mobile frontier, most of the users (~50%) were coming from 2g bandwidth, A/B testing was done to get the right mix of content etc.
Displaying optimistic feedback, using localstorage to cache the navbar (a huge DOM component) , optimizing the carousel (to load the first image as critical resource and the others via javascript) , caching the images and scaling (on their product pages on clicking a product the initial image is cached and scaled) & prioritizing the loading of functionality (theming being non critical) are some of the steps being implemented to improve the user experience for the user while using Flipkart.com
Micro-interactions – Designing The Details
“By paying attention to details, build a product which your customers love, and not just use to get things done”
Praneet Koppula (@mphaxise) from “Bang the Table” emphasized on how little things can make a huge difference.
Praneet explained the thin line difference between a “feature” which is complex, time consuming and cognitively engaging and a “Micro-Interaction” which is simple brief and nearly effortless.
Designs affect emotion, and on that note Praneet gave great examples of micro-Interactions in practice. The brightness setting in Iphone giving a live preview of its affects on screen, the live weather and clock icons.
He also explained how a beautifully crafted micro-Interactions gracefully handles four different parts ie: Trigger, rules, feedback and loops & modes.
Modern Web Graphics Design Using SVG
Priyanka works at adobe and her talk was on using SVG to improve engagement of users on a website. After giving an introduction as to what SVG is, Priyanka emphasized its advantages of being faster and easier to develop assets in SVG than in CSS, also unlike canvas SVG assets are responsive ( which she demonstrated by showing her SVG implementation of the twitter fail whale)and not heavily dependent on JS.
She made her own version of flappy birds and showed how easy it can be to move the bird along a custom path, a task which would be comparatively more daunting if done in CSS. Also, she gave examples of how easy it is to control text based animations using SVG-text.
Also she spoke about tools like SVG-edit and Snap.svg which would greatly help in working with SVG files.
Save Time And Your Brain’s CPU Cycles With Gulp.js
Next talk was on the advantages of using gulp.js by Hage Yaapa (@hacksparrow) from Sourcebits. As explained gulp.js can be used as an alternative to the very popular grunt.js to automate web development and run tasks. Gulp.js completes tasks much faster than grunt.js. Gulp also provides a much cleaner interface to specify tasks and program the API.
Hage benchmarked the two my minifying css.
CSS3 Animations And Transitional Interfaces
Raghu Nayyar (@raghunayyar) spoke about transitions and how a simple interactive effect can go a long way in improving the user experience for the people.
Raghu proposed that an interface lacking the above would very well be a design for robots. And explained how to use different transitions like easein/easeout, linear etc to “design for humans”.
Also, he explained the concept of cubic-bezier and how it plays a role in implementing animations.
Components Now
“Components need to be simple, standalone and isolated”
Mikhail Davydov (@azproduction), a Front-End Еngineer at Yandex explained how we can have reliable non-conflicting components today, without waiting for web components which is still a working draft.
He explained that the way current components are built, they become hugely dependent on other libraries and are strongly coupled, are more powerful than needed, are heavy in size, don’t allow modules to be extracted easily and dependencies need to be managed manually.
Further he proposed guidelines that components need to be simple, standalone and isolated. They need to contain all their dependencies, have scoped CSS and have no global leaks. Need to have a single responsibility, be easy to maintain and test.
Using the practices proposed by BEM, Mikhail showed a demo on building a component which adhered to the above principles and was very similar to web components.
Desktop: The Final Frontier
Anirudh Sanjeev (@skyronic) explained how to run web applications on the desktop platform, the advantages of the native features available to such and applications and the security concerns associated with them.
HTML toolkits offer benefits like Reusability, support for theming, have fluid layout and have MVVM support.
He mentioned the factors to consider when using a desktop toolkit like ease of getting started and making changes, integration with build systems and pre-processors, compatibility with app-stores and deployment.
Also, he explained in detail the pros/cons of various toolkits like node-webkit, Qt, Tide, Adobe AIR, CEF, CEF-Python.
Design Showcase
The next session was on showcasing the designs which came out of the design workshop organized by Sunit Singh (@surdattack).
The attendees basically needed to provide a better design for the Credit Card invoice or the Airline ticket.
We witnessed some innovative results:
Takeaway
Attention to detail, making the customer confident in using your product, building semantic and maintainable systems, cross-pollination of ideas and experiences were the key takeaways from the event.
Now is better a time than any to get one’s hands dirty in the field of web and user experience development, a field more challenging than most.
Post Meta Refresh – Mozilla Community Meetup
Bram and Kaustav had asked me if I could join them for a casual hangout which they were having on Sunday. I met them with my college friends at Matteo Coffea where we had good discussion on the community building, the vision of Mozilla, and various web tech over a brilliant blend of coffee.
An evening well spent.
Share the Love
Meta Refresh 2014 – Conference on Building a Better User Experience http://t.co/g9E0Lm0mgl via @icicletech
— Icicle (@icicletech) March 12, 2014
