Working in your groups, share your desktop to mobile comparisons with each other. What are some similarities between your findings? Which example has the strongest or most interesting transition to mobile(save this one to share). Are there any bad/humorous examples? What made these successful or not?
Working in this paper document, let’s add some rules/ideas for designing a comfortable experience on mobile. I’ve added sections to the document, working with your groups, add at least two bullet points to the list. Note: to edit this document, you must be logged in to dropbox.
We’ll share one of your homework examples from each group.
Groups
Group 1: Trevor, Olivia, Cindy
Group 2: Arani, McKayla, Alicia
Group 3: Natashia,Honglin, Esther
Group 4: Veratie, Ellie, Simon
Group 5: Shreya, Nico, Demi
Group 6: Yuzheng, Jacqueline, Haoyu
Master List – How to Create a Comfortable Reading Experience on Mobile
Typography
Type font is constant
Stark contrast in color makes things more readable since the mobile app is smaller- typically black text and white background
Font sizes are closer together on mobile(less discrepancy between header size and body size
Hierarchy is more prominent on mobile than on desktop
Navigation
Utilizes a pop-out menu that is sometimes hidden, doesn’t take up too much space
Navigation bar at the bottom for mobile phones and top for desktops
Content is condensed inside mobile through navbar whereas desktop is laid out with less clicking
Layout(Grid, design, white space)
The interaction is always vertical(on mobile) - from top to bottom.
Layout for Images are often set to browse horizontally.
Calls to action(buttons) are moved to bottom or bottom right of screen - makes for easier interaction with thumb
Typically utilizes one column grid
Interface(Buttons, Icons)
As button, mobile app has larger font size. Mobile app also replaces a lot of text button to icons.
Buttons/icons are fully visible on desktop. Mobile has to scroll sideways to see all the buttons.
Less motion graphic/videos are shown on mobile.
Images(Photos, Illustrations)
Desktop versions display photos for categories whereas mobile leans on use of icons
Different images of the same movie/ . show were used on the desktop and mobile versions to fit the screen sizes
Desktop fits screen perfectly whereas mobile isn’t, which lets you see the content of next page/scroll
On mobile, images are often enlarged than on the desktop.
Other
Color theme broke from brand colors on the mobile version
Click interactions are often replaced by swipes(especially for horizontal menus)
Elements that were responsive to scroll and mouse movement on the desktop version were only responsive to scroll on the mobile version
Many commercial websites keep images for products on mobile, whereas neglect sub-elements that overwhelms on the desktop.
Desktop to Mobile Comparison
Master List – How to Create a Comfortable Reading Experience on Mobile
Typography
Navigation
Layout (Grid, design, white space)
Interface (Buttons, Icons)
Images (Photos, Illustrations)
Other