Closed Bug 1210504 Opened 9 years ago Closed 8 years ago

[UX] Design how Hello should handle offline/disconnected modes

Categories

(Hello (Loop) :: Client, defect, P3)

Product:
Hello (Loop)
Component:
Client
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED INCOMPLETE

People

(Reporter: standard8, Assigned: Pau)

References

Details

User Story

Currently Hello does very little to notify the user of offline states. We'd like some UX and design decisions for:

- If the network is detected as offline (i.e. we know you don't have any wifi/cabled network), what should Hello display? Should the icon change, or should we only display a notification in the panel?

- If a network interface is "online" but we can't contact one of the servers, what should the icon show, and what should we show in the panel/conversation windows?

In this case, we also need to consider that it may be temporary, so we don't want to alert the user straight away.


In all cases, the main thing we need to remember is that in both cases the user won't be getting notifications. Depending on which server is down, they might not be able to create or enter rooms.

Attachments

(3 files, 6 obsolete files)

Toolbar Hello icon
19.24 KB, image/png
Details
Network Error screen
32.15 KB, image/png
mmaslaney
: ui-review+
Details
Server Error Screen
31.74 KB, image/png
mmaslaney
: ui-review+
Details 
Please see the user story for the UX design needed.
Assignee: sfranks → b.pmm
Bug 1203138 also has more examples from when the push server is down.
See Also: → 1203138
Rank: 35
Whiteboard: [UX]
All error notifications regarding connection issues or server issues should be displayed in the panel. I wouldn't make any visual change to Hello's icon in the toolbar. Once users click on it we can inform them what's wrong. 

I'll mock it up today and will post it here.
Thanks!
(In reply to Pau Masiá [:Pau] from comment #2)
> All error notifications regarding connection issues or server issues should
> be displayed in the panel. I wouldn't make any visual change to Hello's icon
> in the toolbar. Once users click on it we can inform them what's wrong. 

I'm not against that. The only issue I'd be a little concerned about, is that if there is a problem, the user might then not get a notification, and not realise they're not receiving them - unless they happen to open the panel.

That might not be too big an issue, its hard to tell.
Yes, that is a valid concern, Mark.

Pau we should look at changing the icon in the toolbar too if there is a connection issue.
You're right, Mark. I'll upload the UX proposal for both the Toolbar Hello icon and the errors displayed in the panel.
Attached image Toolbar Hello icon — 
Attachment of Hello's icon when an error occurs.
Attached image Network Error screen (obsolete) — 
Attachment of Network Error message displayed in the panel.
Strings to be reviewed.
Attached image Server Error Screen (obsolete) — 
Attachment of Server Error message displayed in the panel.
Strings to be reviewed.
Comment on attachment 8671829 [details]
Server Error Screen

I believe Matej once told me that we don't say Sorry in for things we can't control. Matej, do you mind reviewing these error message strings?


> Sorry!
> We're having technical difficulties

I think this could just be "We're experiencing technical difficulties" without a title.

> Network Error
> Please check your network connection and try again

Does this need a title either?

Also, Pau, I think some of these strings might run on to three lines in other locals. How does that icon look in those cases? Might be better to fix a position for it.
Flags: needinfo?(matej)
(In reply to Sevaan Franks [:sevaan] from comment #9)
> Comment on attachment 8671829 [details]
> Server Error Screen
> 
> I believe Matej once told me that we don't say Sorry in for things we can't
> control. Matej, do you mind reviewing these error message strings?

I think I got that from Madhava and I agree. Let's not shift blame to ourselves.

> > Sorry!
> > We're having technical difficulties
> 
> I think this could just be "We're experiencing technical difficulties"
> without a title.

+1

> > Network Error
> > Please check your network connection and try again
> 
> Does this need a title either?

Would also prefer without.
Flags: needinfo?(matej)
Ok, if we're all agree in the wording, I'll make the appropriate changes to it. Regarding the icon, Sevaan, I think we should make it go vertical aligned with the text so in each scenario is centered.
Attached image Network Error screen (obsolete) — 
Updated version.
Attachment #8671827 - Attachment is obsolete: true
Attachment #8671977 - Flags: ui-review?(mmaslaney)
Attached image Server Error Screen (obsolete) — 
Updated version.
Attachment #8671829 - Attachment is obsolete: true
Attachment #8671979 - Flags: ui-review?(mmaslaney)
Comment on attachment 8671979 [details]
Server Error Screen

Can we use a color that aids to the message more specifically (e.g. red or yellow)? 

TRY:
Red: D74345
Yellow: FCCE00

Or Try

Make the background neutral/gray and have the label be red.
Flags: needinfo?(sfranks)
Attachment #8671979 - Flags: ui-review?(mmaslaney) → ui-review-
Comment on attachment 8671977 [details]
Network Error screen

Can we use a color that aids to the message more specifically (e.g. red or yellow)? 

TRY:
Red: D74345
Yellow: FCCE00

Or Try

Make the background neutral/gray and have the label be red.
Attachment #8671977 - Flags: ui-review?(mmaslaney) → ui-review-
Thanks Mike. Pau, do you mind giving it another go?
Flags: needinfo?(sfranks) → needinfo?(b.pmm)
Attached image Network Error screen (obsolete) — 
Sure thing. I've tried what you said, Michael, and I definitely go for the red background. Thanks for your advise.
Attachment #8671977 - Attachment is obsolete: true
Flags: needinfo?(b.pmm)
Attachment #8672949 - Flags: ui-review?(mmaslaney)
Attached image Server Error Screen (obsolete) — 

        Attachment #8671979 -
        Attachment is obsolete: true

        Attachment #8672950 -
        Flags: ui-review?(mmaslaney)

    
    

    
  

      
      
      
      

        Attached image
          
        Network Error screen
        — 
      

    


  
Updated panel layout since there was a mistake.

        Attachment #8672949 -
        Attachment is obsolete: true

        Attachment #8672949 -
        Flags: ui-review?(mmaslaney)

        Attachment #8672995 -
        Flags: ui-review?(mmaslaney)

    
    

    
  

      
      
      
      

        Attached image
          
        Server Error Screen
        — 
      

    


  
Updated panel layout since there was a mistake.

        Attachment #8672950 -
        Attachment is obsolete: true

        Attachment #8672950 -
        Flags: ui-review?(mmaslaney)

        Attachment #8672996 -
        Flags: ui-review?(mmaslaney)

        Attachment #8672996 -
        Flags: ui-review?(mmaslaney) → ui-review+

        Attachment #8672995 -
        Flags: ui-review?(mmaslaney) → ui-review+
Whiteboard: [UX]

    
    

    
  
Support for Hello/Loop has been discontinued.

https://support.mozilla.org/kb/hello-status

Hence closing the old bugs. Thank you for your support.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → INCOMPLETE

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: