r i t
play

R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering How Do We - PowerPoint PPT Presentation

Feb 04, 2024 •392 likes •692 views

Website Design Small Screen Design Responsive Design R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering How Do We Really Use the Web? Do users carefully read or scan and click ? Facts of life: We dont read pages, we scan

  1. Website Design Small Screen Design Responsive Design R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering

  2. How Do We Really Use the Web?  Do users carefully read or scan and click ?  Facts of life:  We don’t read pages, we scan them  We don’t make optimal choices, we choose the first reasonable option  Little downside for wrong guesses  We muddle through without always understanding how things work R.I.T S. Ludi/R. Kuehl p. 2 R I T Software Engineering

  3. Browse or Search?  Browsing  Versus the real world – no sense of scale, direction, or location  Searching - users are really not that good at forming effective queries  So help the user find the desired page  Auto complete  Auto suggest to disambiguate  Suggest keywords R.I.T S. Ludi/R. Kuehl p. 3 R I T Software Engineering

  4. Site Evolution  Informational sites:  Balance display density of useful information with learnability for infrequent users  Full screen content with good page navigation  Transactional sites  Properties of informational sites plus functional behaviors  Efficient structured navigation based on an “information architecture” page content organization  Web application sites:  Desktop-like more complex applications  “ Views” more than “pages ” – not a “document” metaphor  Asynchronous server communications R.I.T S. Ludi/R. Kuehl p. 4 R I T Software Engineering

  5. Designing for the Web Current landscape …  HTML5 + CSS3 + JavaScript to build a wide array of sophisticated “rich Internet applications”  Reusable GitHub based open source UI components ; e.g., Bootstrap, jQuery  Modern browsers efficiently process HTML and JavaScript  Widely accepted design conventions and patterns have evolved  Good foundational design principles still apply! W3Schools Web Tutorials R.I.T S. Ludi/R. Kuehl p. 5 R I T Software Engineering

  6. Some Web Design Guidelines Home Page Page Layout Navigation Information Presentation • • • • Sites value and Consistent Page navigation supports Simple grid – visual purpose associative information architecture background • • Positive first hierarchy, Primary(global) sections at top, images for secondary(local) on left, “utilities” at impression element readability • • Limit to one alignment bottom Distinguish • • screen Header and A way to search important • • Keep it simple footer Page and link names match images from • Access to site’s • boundaries Navigation markers (e.g., aesthetics • major features breadcrumbs) Have clear • No dead end pages and useful • List of contents for long scrollable reasons for pages using • Good link affordances multimedia R.I.T S. Ludi/R. Kuehl p. 6 R I T Software Engineering

  7. Typical Page Layout Site ID Search Local Navigation Page Name Sections R.I.T S. Ludi/R. Kuehl p. 7 R I T Software Engineering

  8. Single Page Web APPs  What are they – single [long] scrollable page with associated client side code for server side data access  More appropriate for smaller sites  Claim is simpler user navigation and understanding, simpler design, deployment, and maintenance  However …  May be more complex – e.g., may have to duplicate in code existing browser services such as history for back button refresh  May be performance tradeoffs – initial load latency, variable client performance  More code means more opportunity for bugs  Less effective search engine optimization R.I.T S. Ludi/R. Kuehl p. 8 R I T Software Engineering

  9. Usability and Small Screens SE444 R.I.T S. Ludi/R. Kuehl p. 9 R I T Software Engineering

  10. iPhone Android R.I.T S. Ludi/R. Kuehl p. 10 R I T Software Engineering

  11. “The phrase ‘mobile usability’ is pretty much an oxymoron. It's neither easy nor pleasant to use the Web on mobile devices.” “designing for mobile is hard” “It’s not enough that a site will display, can the user get things done?” Jacob Nielsen, useit website R.I.T S. Ludi/R. Kuehl p. 11 R I T Software Engineering

  12. Small Screens  We will focus on consumer mobile devices such as smartphones and tablets  However, there is another large category of embedded devices to be considered as well  Design guidelines apply equally to those devices with more constraints such as safety GPS Digital Camera Airplane Control R.I.T S. Ludi/R. Kuehl p. 12 R I T Software Engineering

  13. Mobile Usability Problems (Opportunities)  Small screens (inherent)  Awkward input (“fat finger syndrome”)  Network performance and reliability , especially for downloads (but getting better)  Mis-designed websites – designed for the desktop just makes it worse (but getting better) R.I.T S. Ludi/R. Kuehl p. 13 R I T Software Engineering

  14. Small Screen Design Guidelines Screen Layout Navigation Information Presentation • • • To preserve screen real Limit navigational hierarchy, Rapid serial presentation of estate … especially global to text, important information • Use transparency; e.g., contextual transition first (progressive disclosure); • Apply Fitt’s Law: large • widgets Minimize extended scrolling • Vertical or horizontal objects for navigation (touch) or paging • screen navigation versus hypertext Optimize • • • Use images sparingly Apply screen layout design 14pt fonts • patterns; E.g …. • Minimize use of Organize text with • footers, breadcrumbs, Carousels headings • • progress indicators, Stacks Minimize search to avoid • menu bars Lists complex data entry (voice • • …. Most frequently used okay) controls at bottom • Consider the physical feel – ergonomics, • The use of the (one) hand – fingers • Finger tip target size guides (e.g., iPhone 44 pixels) R.I.T S. Ludi/R. Kuehl p. 14 R I T Software Engineering

  15. Responsive Design for Web Applications R.I.T S. Ludi/R. Kuehl p. 15 R I T Software Engineering

  16. What is the Problem?  Mobile web access is ubiquitous  One interface design does not fit all screens for optimal user interaction  Mobile users may have different needs from desktop users  So why not make designs flexible to dynamically match the screen environment? R.I.T S. Ludi/R. Kuehl p. 16 R I T Software Engineering

  17. Web App vs. Native App?  Web App  Develop once, lower support costs  Cross device platform support  Dependent on a network connection  May be functional limitations  Native app  More expensive to develop and support  Not portable  Better performance and security  Use local hardware  Better UX?  App store distribution  Hybrid app? Native app accesses website data R.I.T S. Ludi/R. Kuehl p. 17 R I T Software Engineering

  18. Responsive Web Design  Create a single website that works effectively on the desktop as well as mobile devices  Responsive websites reorganize themselves automatically according to the device displaying them  Desktops/laptops get the full experience – video, images, animation  Smartphones get a simplified experience that works quickly – app-like  Tablets – something in between R.I.T S. Ludi/R. Kuehl p. 18 R I T Software Engineering

  19. Responsive Web Design  More than altering the layout based on viewport* size  Invert the process of web design  Design for the smallest viewport first  Progressively enhance the design and content for larger viewports * Viewport is display area versus physical screen size R.I.T S. Ludi/R. Kuehl p. 19 R I T Software Engineering

  20. Responsive Design Example iPhone iPad Desktop browser http://www.andthewinnerisnt.com/ Check out the CSS File – look for @media R.I.T S. Ludi/R. Kuehl p. 20 R I T Software Engineering

  21. Responsive Design Guidelines Group similar devices by screen size/media type to establish target size “breakpoints” for design For each media type, identify unique properties and shared properties that will vary by value (e.g. font size) Design adaptive layouts – e.g., large menu bar on the desktop, dropdown menu on smartphone Use “fluid grids” - proportional layouts scaled by screen dimensions (scale factor) Tailor the amount and type of content by screen size Use CSS3 (@media query) and HTML5 encoding R.I.T S. Ludi/R. Kuehl p. 21 R I T Software Engineering

  22. Cascading Style Sheet (CSS) Media Queries  CSS3 “@media” query – query “screen” as media type with screen properties such as size and resolution  All following style sheet rules apply to that media type  Substitute different layout commands or a tailored CSS file  Scale to match device screen resolution and size  Transform screen layout – e.g., number of columns of content  Adjust object size such as for links (Fitt’s Law)  Adjust typography – e.g., font size, line width and length @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { https://www.w3schools.com/css/css3_mediaqueries.asp body { line-height: 1.2 } R.I.T S. Ludi/R. Kuehl p. 22 R I T Software Engineering

  23. CSS Media Query Example  @Media rule. What happens? R.I.T S. Ludi/R. Kuehl p. 23 R I T Software Engineering

Recommend

More recommend