Event Flow

• Polls
  • UI, UX
• Realisation Story
  • Aankh, Description
  • Designs
    • Clarification about Designs (Architecture, Hardware, Backend Systems)
  • More time on designs, reduced coding time
  • Counter Intutive
  • Initial Development, blank canvas, hit and trial
  • Analogy of a CP problem, thinking about the problem and then coding.
• Introduction
  • Not a checklist, not defined
  • Eg: Not going to be designing empty states, but helpful empty states.
  • Push you to think.
  • It will not help you with how to make good designs, but how to be a good designer.
  • Common sense.
• Keep the UI Design Simple
  • Simple doesn’t necessarily mean easy.
  • Complex ideas can be broken down to build a simple interface.
  • Designer’s personal satisfaction and bias
    • Should be at the bottom of the list
  • Who you are designing for and why?
  • StackOverflow
    • Incredibly dense
  • CodeForces
    • Too much to look at once
    • No “Landing Page” as such
    • Divisions
    • Proper Boundaries
    • Flexibilty to customize UIs
    • Clear CTA
  • Google Calendar
    • Complicated UI for edge test case
    • Even complicated for a week layout
    • A better redesign
  • Saying: No practical usage of a part of UI, it should not be there.
    • Try to question everything. That’s how you’ll understand.
  • When it comes to apps, the first impression is created by aesthetics, not by value.
• Put the User in the Driving Seat
  • GeeksForGeeks
    • Login/Register
  • Codeforces
    • Catalog/Contests
  • Power Users
    • Users of your application who’ve developed high muscle memory over the period of time.
  • WhatsApp Payments
  • Building Frictionless Products
• Bonus: Friction in Products
  • Netflix’ Next Episode
    • Reducing Friction
  • Forms
    • Increasing Friction
  • AWS Account Closing Conditions
  • Deleting a GitHub repository
• Be Consistent
  • Design System
    • Consistent, standardized, reusable
    • Eg: Razorpay
• Avoid Unnecessary Complexity in the UI Design
  • Aim for the minimun number of steps/screens.
  • The three click rule.
    • Eg: WhatsApp Display Picture
    • Reducing clicks for ‘payments’
  • “Successful UI design is about removing as many obstacles, bottlenecks, and potential confusion as possible from the user experience.”
• Provide Clear Signposts
  • Navigating your app should not be intimidating or confusing. Instead it should be fun and fearless, and should take place unconsciously.
  • Simple, logical, clearly signposted
  • Visual cues wherever possible
  • The more the user is aware about its surroundings, the more comfortable user gets
    • Horizontal Progress for Scroll Bars
    • Form Progress
  • Clear Call to Actions (CTAs)
    • Eg: Samosa UI
      • Association of CTAs to color and icons.
  • Another Observation: Network Tab in Devtools
    • Close Icon on the Reosurces Tab is on the left
• Be tolerant of mistakes
  • Mistakes happen.
  • And users change their minds.
  • In fact, if they are new to the app, they may not have been entirely sure of their actions in the first place.
  • Make it easy to backtrack whenever necessary.
  • Not only will this help to avoid the frustration of lost data and wasted time;
  • but it gives users the confidence to explore your app and make changes without fear of negative consequences.
    • WhatsApp Chat Open
    • Telegram State’s Retention
      • Twitter’s Poor State Management of the infinite scrolling homepage
    • Telegram Drafts
• Give Relevant Feedback
  • Keep users informed about their progress. Provide acknowledgment that their actions have been received.
  • Hover/Clicked Buttons
  • Sending Email Acknowledgement
  • Copy to Clipboard vs. Ctrl C
  • Instagram’s Save Posts
• Design the UI for Accessibility
  • Don’t assume that all users are just like you and the people you know.
  • Social and cultural backgrounds
  • While realistically you can’t be expected to account for every possible variation in social and cultural convention;
  • Don’t automatically assume that the way you do things is the only logical way of doing them.
    • In many parts of the world people read from right to left.
  • Design with questions in mind, not answers.
  • Try to question every decision, for a clearer understanding.
    • Even very simple things such as the colors you use will be viewed differently by different people.
    • And this isn’t just a case of subjective or cultural differences either;
    • A significant portion of the world’s population is color blind, after all.
  • EG: Saathi
    • Surface area
      • Eg: Instagram’s Double Tap
        • LinkedIn’s same feature.
• The best UI typeface goes unnoticed.
  • Simple UI design principles can help create a more effective user interface;
  • facilitating interaction to such a degree that the user barely notices the UI at all.