Recent Changes

Wednesday, January 11

  1. page Animation edited Problem Hold the user's attention long enough to perform an activity on the app. Make the devi…

    Problem
    Hold the user's attention long enough to perform an activity on the app. Make the device more fun and interesting and the user feel entertained.
    Solution
    Introduce animation to the apps and the overal activites on the device to make it more interactive and augment the visual appeal.
    When to Use
    It is usually used for games to make interactions more fun. It can also be used for overall site navigation, notification updates etc. to make the experience more interactive.
    How to Use
    ...
    Heavy animations that involve a lot of interaction elements might drain power quickly.
    Animation should be used when the context is light and not for mundane tasks that need to be done quickly and without any effort like opening an app, navigating to a control etc.

    (view changes)
    3:36 pm
  2. page Lock screen edited LOCK SCREEN Problem ... in use. Solution ... unlock the device. The device.The Lo…
    LOCK SCREEN
    Problem
    ...
    in use.
    Solution
    ...
    unlock the device.
    The
    device.The Lock Screen
    ...
    yet unlocked.
    Screens
    Screens displayed when
    How to Use
    Slide to unlock
    ...
    The phone can be unlocked by simply using your face. The front-facing camera will use facial recognition software to register your face and then use it every time you want to unlock the phone. A back up pin or pattern can also be registered.
    {facial_unlock.jpg}
    To Avoid
    Mobiles
    Considerations
    Mobile devices
    are 24/7, always-on devices for their users.devices. Do not
    ...
    display by default.default when locking the device. Consider the
    ...
    true needs of the user can be
    Do not make the Lock Screen display or interactions, including unlocking itself, too different from the design and interaction paradigms used on the rest of the device.
    Avoid using key combinations to unlock which may disrupt ongoing functions.
    (view changes)
    3:33 pm
  3. page Advertisments edited Advertisements Problem ... app or device. device to provide bussiness sponsorship. Soluti…
    Advertisements
    Problem
    ...
    app or device.device to provide bussiness sponsorship.
    Solution
    Businesses provide sponsorship to apps via the placement of ads.
    Ads need to be placed in a prominent place in the app but still not distract the user from performing normal actions on the device.
    ...
    action on.
    Make the
    The actionable part
    ...
    the ad should be visibly different
    Usually the ideal location for the placement of the ad is right , bottom or bottom right and it is usually fixed.
    Design PatternsHow to Use
    Custom Search Ads
    These ads are shown based on customer preferences.
    {custom_ad.gif}
    ...
    the screen (might want to mention why you when to use these ads, benefits and negative aspects (RJS))
    {android_ad.jpg}
    Click to call Ads
    These ads are actionable and can be used to directly call the business.
    {ads.png}
    AvoidConsiderations
    Making the ads similar to the content of the app to avoid confusion between the two. Provide a clear demarcation between the ad and app content.
    Animating ads as they distract and annoy the user and ultimately defeat the purpose of the ad.
    ...
    Placing ads on main/primary applications of the device like email, messaging, phone etc.
    Make the text of the ad small or add unnecessary images that detracts from the message of the ad.

    (view changes)
    3:30 pm
  4. page Activity feed edited Problem Provide a way for users to keep track of the history of the their app or account. Sol…

    Problem
    Provide a way for users to keep track of the history of the their app or account.
    Solution
    Implement an activity feed that tracks meta data about the site like number of visits made, updates made and by whom etc.
    When to Use
    Activity feeds are used to display the most interesting recent activity on a site.
    How to Use
    ...
    Access to this feed should be easy to get to via a button or control that clearly indicates either History or Activity.
    If more than one activity is reported, they should be distinguishable by change in color and user name.

    (view changes)
    3:27 pm
  5. page Comment feed edited Problem Provide a way for the users to comment on shared content.

    Problem
    Provide a way for the users to comment on shared content.
    (view changes)
    3:26 pm
  6. page Comment feed edited ... Solution Provide comment feeds to allow users to enter comments/suggestions for the content u…
    ...
    Solution
    Provide comment feeds to allow users to enter comments/suggestions for the content under question.
    When to Use
    If your app deals with content that is shared or can be viewed by other users, e.g. photo's, video's, audio files or text, you could add the feature to comment on it.
    How to Use
    ...
    Details about the person making the comment should be displayed clearly and easily differentiated from the next comment.
    Metadata like time and the location of the person making the comment make the interaction more meaningful.

    (view changes)
    3:25 pm
  7. page Coach Marks edited Problem Provide a quick tutorial to the user on how to use a new control or application on the…

    Problem
    Provide a quick tutorial to the user on how to use a new control or application on the device.
    Solution
    Use coach marks to indicate the actions that can be performed on the application and explain what the controls on the application are meant for.
    When to Use
    It can be used when new and custom controls are introduced that have never been used before.
    It is also used to help navigate a new application (mostly games ) easily and take appropriate actions on the control.
    ...
    The option to disable the coach marks should be available via settings, as the user gains experience over time. By default, enable the marks.
    Make the animations and images associated with the coach marks intuitive and user friendly.

    (view changes)
    3:24 pm
  8. page Dial pad edited Problem Allow users to call up someone by entering phone number on the device. Solution Prov…

    Problem
    Allow users to call up someone by entering phone number on the device.
    Solution
    Provide a dial pad to enter the phone number and also to initiate/activate the call.
    When to Use
    All phones should have the option to call someone either by entering the number or by selecting pre-stored numbers in the contact cards.
    This pattern is concerned with only the numeric entry and certain aspects of the overall interaction of the Dialer application.
    How to Use
    It usually consists of 3 areas, the top section for displaying the entered number, the middle section that holds the dial pad for entering the numbers/names to contact and the bottom section to perform other call related activites like looking up contacts, looking for voice mail, checking call history , edit contact cards etc.
    Not only can dial pad be used to call a number but it can also be used to select a contact for messaging purposes too.
    {dialpad1.png}
    Not only can dial pad be used to call a number but it can also be used to select a contact for messaging purposes too.
    {dialpad2.jpg}
    The dialpad can also be made more interesting by using gestures to select the number as per the retro style of dialing the phone.
    ...
    The dialer keypad should be part of the keyboard as one of the keyboard layouts based on the input scope of the text area under focus or action selected.
    Actions to call or canel the call should be indicated clearly by using appropriate colors , red for canel and green to make the call.

    (view changes)
    3:23 pm
  9. page Scroll Bar edited Problem Provide a way to access data when the context extends beyond the length of the screen …

    Problem
    Provide a way to access data when the context extends beyond the length of the screen
    Solution
    Use gestures to slide to the top or bottom of the screen in case of portrait view and slide left and right in case of landscape view of the screen.
    When to Use
    It is used when the content being accessed exceeds the size of the screen. It is usually associated with other list controls like menu, lists, submenus, etc. to access the content in it's entirety.
    How to Use
    ...
    Support inertia scrolling where the user can flick the screen and depending on the speed of the flick, the screen can scroll accordingly.
    Tapping on area of the screen should bring focus to that area, which is a kind of interactive scrolling.
    Here you can scroll up and down by panning the screen.
    {scrolling1}
    Here the user needs to flick down on the screen to get to the bottom of the page. The teaser text indicates that there is more information at the bottom to be viewed.
    {scrolling2.png}
    Considerations
    ...
    Indicate the end of the scrollable area by making sure that scrolling is not made possible beyond it, to make the users more situationally aware.
    Avoid multi-axis scrolling as it is difficult to use on a small screen.

    (view changes)
    3:21 pm
  10. page Scrolling Menu edited Problem ... of navigation. Solution A scrolling menu is used when the number of selection…

    Problem
    ...
    of navigation.
    Solution
    A scrolling menu is used when the number of selection items are limited.
    ...
    Make sure that the current selection is highlighted to indicate it's position in the list.
    The scrolling speed should be such that the user can comfortably scroll and select an item without being disoriented by the speed.

    (view changes)
    3:16 pm

More